https://github.com/hacksore/react-ha-iframe

Running react in a Home Assistant lovelace card
https://github.com/hacksore/react-ha-iframe

docker home-assistant lovelace-card lovelace-ui react

Last synced: 3 months ago
JSON representation

Running react in a Home Assistant lovelace card

• Host: GitHub
• URL: https://github.com/hacksore/react-ha-iframe
• Owner: Hacksore
• Created: 2020-11-16T22:17:54.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-11-16T22:45:48.000Z (over 5 years ago)
• Last Synced: 2024-10-05T23:41:49.255Z (almost 2 years ago)
• Topics: docker, home-assistant, lovelace-card, lovelace-ui, react
• Language: JavaScript
• Homepage:
• Size: 184 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-ha-iframe

Test using react in a lovelace iframe powered by [home-assistant-js-websocket](https://github.com/home-assistant/home-assistant-js-websocket) for the data connection.

## Demo

Pass a long lived `apiToken` query string param and `host` if your host differs than the default.

Example card

![example](https://i.imgur.com/gMm7f5S.png)

Start the docker container to expose port 3000 then configure the webpage card.

```

docker run -p 3000:80 hacksore/react-ha-iframe

```

Configure the card

![Imgur](https://i.imgur.com/0LlobYF.png)

### Final thoughts

This is probably not practical to spawn a new socket connection for every card. Maybe you could use message posting to try and only use one socket.

This is just a POC so take what you want from this 😎