You probably want to use https://github.com/shannonhochkins/ha-component-kit - I'm switching to that in my own setup
Helpers and hooks for building Homeassistant custom dashboards in React. Originally extracted from a personal dashboard. Connects to the Homeassistant websocket API via home-assistant-js-websocket, and the Homeassistant REST API.
Wrap the components that require interaction with Homeassistant in a HomeassistantProvider
, then use provided hooks to fetch data.
More in-depth documentation is available here.
import { HomeassistantProvider, useEntity, useToggleLight } from 'use-homeassistant'
const url = 'http://homeassistant.local:8123'
const token = '...' // https://developers.home-assistant.io/docs/auth_api/#long-lived-access-token
const Lightbulb = ({ entityId }) => {
const toggleLight = useToggleLight()
const { state, attributes: { friendly_name } } = useEntity(entityId)
return <div>
The light with HA name {friendly_name} is currently {state}.
<button onClick={() => toggleLight(entityId, state === 'on' ? false : true)}>Change that!</button>
</div>
}
const App = () => {
return <HomeassistantProvider homeassistantUrl={url} accessToken={token}>
<Lightbulb entityId='entity.example_light'>
</HomeassistantProvider>
}