Skip to content

Proof of Concept: Mounting react applications efficiently as a custom lovelace card using @preact/signals-react.

Notifications You must be signed in to change notification settings

samuelthng/homeassistant-react-lovelace

Repository files navigation

Home Assistant: React Lovelace Card

(React + TypeScript + Vite)

This project was bootstrapped from the @vite template which provides a minimal setup to get React working in Vite with some ESLint rules.

To install:

Node.js

npm install

Bun.js

bun install

To build with profiler:

Node.js

npx vite build --mode development

Bun.js

bun x vite build --mode development

To build with minification and optimisations:

Node.js

npx vite build

Bun.js

bun x vite build

To add to Lovelace:

  1. Build the app
  2. Copy the built bundle located at dist/react-card.js
  3. Paste your bundle into /config/www/react-card.js of your Home Assistant setup
  4. Add /local/react-card.js as a resource on Lovelace
  5. Reload your Home Assistant
  6. Create your custom card:
    type: custom:react-card
    entity: sun.sun

    Note: Be sure to open Home Assistant using it's local address if your component does not seem to update after inserting a new version.

image

About

Proof of Concept: Mounting react applications efficiently as a custom lovelace card using @preact/signals-react.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published