Home Assistant React - Component Kit @hakit

[shannonhochkins]

I’ve been working on this for a few months now - I’ve published two npm packages, @hakit/components & @hakit/core. And here’s the repository! (give me a star if you’re interested!)

There’s extensive documentation provided! Here’s a preview of what you can do with hakit:

Easy ThemeProvider to create different themes!

https://i.redd.it/gk8nt9muqqnb1.gif(image larger than 3 MB)

Or, you can do something completely custom: https://www.youtube.com/watch?v=xE_IZP9HeWc

These two packages were designed to make it exceptionally easy to start creating a custom dashboard to interact with home assistant in React, typescript types are available for all services and entity domains, it’s super simple to get going!

<HassConnect hassUrl={URL}>
    <ThemeProvider />
</HassConnect>

That’s all you have to do to get authenticated as it will ask you to login, and you only have to login once (per device).

I’ve been pretty active getting this to a state where users can comfortably achieve all they can achieve with lovelace, the components that are supported are;

1. ButtonCard - card similar to home assistant button card, lights/climates have extra popup information

2. ClimateCard - card to control climate entities with a popup for more control

3. EntitiesCard - List of entities and their states

4. FabCard - simple floating action button

5. MediaPlayerCard - full media play card supporting most features

6. VacuumCard - (WIP) - this is in progress

7. PictureCard - simple picture card

8. RoomCard - automates routing via hashes

9. SidebarCard - RoomCards auto populate the sidebar menu items

10. TimeCard - a card to display the time/date based on sensor.time / sensor.date

11. TriggerCard - a card to trigger something once, like an automation or scene or script

12. WeatherCard - displays weather information

Amongst others to help with layout, and shared components (Row, Column, Group, Alert, ControlSlider, ColorPicker, ClimateControls, ColorTempPicker, ThemeProvider, ErrorBoundary, Modal, Ripples & more.

To trigger a request to update an entity if you need to do something out of the box, is super simple as there’s hooks provided to interact with the websocket api which is completely typed with typescript:

const entity = useEntity('climate.air_conditioner');
entity.api.setHvacMode({
    hvac_mode: 'cool',
});

I have a bunch of ideas to take this to the next level, such as Masonry layouts, Theme pickers, and lots more custom cards, but as you can appreciate, this has been a lot of work already!

I would appreciate some feedback of what you think of it so far!!

[shannonhochkins]

Incase anyones interested, the whole demo above (including the gif) is generated from the following code:

<HassConnect hassUrl="https://homeassistant.local:8123">
  <ThemeProvider />
  <Row fullWidth wrap="nowrap" fullHeight alignItems="stretch">
    <SidebarCard startOpen={false} />
    <Column fullWidth gap="1rem" wrap="nowrap" justifyContent="flex-start" style={{
      padding: '2rem',
      overflow: 'auto'
    }}>
      <Group title="Lights & Switches">
        <ButtonCard entity="light.fake_light_1" service="toggle" />
        <ButtonCard entity="light.fake_light_2" service="toggle" icon="mdi:power" />
        <ButtonCard entity="light.fake_light_3" service="toggle" />
        <ButtonCard entity="switch.fake_switch" service="toggle" />
        <ButtonCard entity="vacuum.robot_vacuum" service="toggle" />
      </Group>
      <Group title="Lights & Switches Fabs">
        <FabCard entity="light.fake_light_1" service="toggle" />
        <FabCard entity="light.fake_light_2" service="toggle" icon="mdi:power" />
        <FabCard entity="light.fake_light_3" service="toggle" />
        <FabCard entity="switch.fake_switch" service="toggle" />
        <FabCard entity="vacuum.robot_vacuum" service="toggle" />
      </Group>
      <Group title="Miscellaneous" layout="column">
        <Row gap="1rem" alignItems="stretch">
          <EntitiesCard entities={['sensor.date', 'sensor.time', 'automation.dim_lights']} />
          <MediaPlayerCard entity="media_player.fake_speaker" layout="slim" />
          <TriggerCard entity="scene.good_morning" />
        </Row>
        <Row gap="1rem" alignItems="stretch">
          <TimeCard />
          <ClimateCard entity="climate.air_conditioner" />
          <WeatherCard entity="weather.entity" />
        </Row>
        <Row gap="1rem">
          <RoomCard icon="mdi:office-chair" title="Office" hash="office" image={office}>
            <Group title="Lights & Switches">
              <ButtonCard entity="light.fake_light_1" service="toggle" />
              <ButtonCard entity="light.fake_light_2" service="toggle" />
              <ButtonCard entity="light.fake_light_3" service="toggle" />
              <ButtonCard entity="switch.fake_switch" service="toggle" />
              <ButtonCard entity="vacuum.robot_vacuum" service="toggle" />
            </Group>
          </RoomCard>
          <RoomCard icon="mdi:sofa" title="Living Room" hash="living-room" image={livingRoom}>
            <Group title="Living Entities">
              <ButtonCard entity="light.fake_light_2" service="toggle" />
              <ButtonCard entity="light.fake_light_3" service="toggle" />
              <ButtonCard entity="vacuum.robot_vacuum" service="toggle" />
            </Group>
          </RoomCard>
          <RoomCard icon="mdi:dining" title="Dining Room" hash="dining-room" image={diningRoom}>
            <Group title="Dining Entities">
              <ButtonCard entity="light.fake_light_1" service="toggle" />
              <ButtonCard entity="light.fake_light_2" service="toggle" />
              <ButtonCard entity="light.fake_light_3" service="toggle" />
            </Group>
          </RoomCard>
        </Row>
      </Group>
    </Column>

  </Row>
</HassConnect>

[timota (Taras)]

wow. It looks nice and your documentation is great. Currently I’m using Tileboard, and your project can supersede it completely. Definitely worth to try.
Thank you for sharing

[shannonhochkins]

Thanks! I hadn’t heard of TileBoard before, I will check it out for sure, I still have a long way to go, I need to have an integration through hacks and automated templates for this to be viable I think

[gabrin (Rinat)]

Thanks! Is it possible to authorize an application using a token without a login/password form?