ha-react-card v0.0.1-beta.1

ha-react-card

A simple tool to help React developers creating Home Assistant Lovelace cards.

Content

createHaCardFromComponent()

Create a custom element compatible with Home Assistant Lovelace from a React component.

Usage

import { createHaCardFromComponent } from "ha-react-card";

createHaCardFromComponent("name-of-the-card", ReactComponentToConvertToCard);

The react component will receive the matching props, on mount and when hass is updated:

function ReactCardComponentExample({ hass, config, narrow }) {
  // do something with the passed props
  return <div>
    <h2>I am a Home Assitant Card created with React.<h2>
    <p>Hass currently has {Object.keys(hass?.state).length} entities.</p>
  </div>
}

useLovelaceCard()

React hook allowing the usage of Home Assistant Lovelace cards within React.

Usage

function ReactCardComponentExample({ hass, config, narrow }) {
  const entitiesCard = useLovelaceCard("hui-entities-card", hass, {
    entities: ["light.living", "light.bedroom"],
  });

  return <div>
    <h2>I am a Home Assitant Card created with React.<h2>
    {entitiesCard}
  </div>
}

Will render Lovelace a hui-entities-card element, passing the provided hass instance and config.