Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dangreco/zupre
HA boilerplate card using Zustand, Preact, Styled Components
https://github.com/dangreco/zupre
home-assistant lovelace lovelace-card lovelace-custom-card preact zustand
Last synced: about 2 months ago
JSON representation
HA boilerplate card using Zustand, Preact, Styled Components
- Host: GitHub
- URL: https://github.com/dangreco/zupre
- Owner: dangreco
- Created: 2022-02-27T16:10:33.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-09-08T15:21:01.000Z (over 1 year ago)
- Last Synced: 2024-11-02T09:32:14.055Z (about 2 months ago)
- Topics: home-assistant, lovelace, lovelace-card, lovelace-custom-card, preact, zustand
- Language: TypeScript
- Homepage:
- Size: 121 KB
- Stars: 14
- Watchers: 1
- Forks: 10
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# zupre
A **~55kb** boilerplate card for Home Assistant.
#### Stack:
- [TypeScript](https://github.com/microsoft/TypeScript)
- [zustand](https://github.com/pmndrs/zustand) (state management)
- [styled-components](https://github.com/styled-components/styled-components) (styles)
- [custom-card-helpers](https://github.com/custom-cards/custom-card-helpers) (Home Assistant utils + types)
- [home-assistant-js-websocket](https://github.com/home-assistant/home-assistant-js-websocket) (Home Assistant types)
- [webpack](https://github.com/webpack/webpack) (build system)
- [ESLint](https://github.com/eslint/eslint) (linter)
- [Husky](https://github.com/typicode/husky) (pre-commit hooks)
## Hooks
- [`useEntity`](#useentityentityid-string)
- [`useEntities`](#useentitiesentityids-string)
- [`useHistory`](#usehistoryentityid-string-config-historyconfig)
- [`useUser`](#useuser)
- [`useHass`](#usehass)
- [`useConfig`](#useconfig)
### `useEntity(entityId: string)`
---
Retrieves an entity by ID from the Home Assistant state. The entity will be `undefined` if the state
of HA is not loaded or if the entity does not exist.
**Returns:** `HassEntity | undefined`
**Example:**
```tsx
...
const Card = () => {
const sun = useEntity('sun.sun'); // sun: HassEntity | undefined
return (
{ sun?.attributes.friendly_name }
State:
{' '}
{ sun?.state }
);
};
...
```
[](https://postimg.cc/CRpNffFV)
### `useEntities(entityIds: string[])`
---
Retrieves a record of entities by their IDs.
**Returns:** `Record`
**Example:**
```tsx
...
const Card = () => {
const lights = useEntities([
'light.lamp',
'light.ceiling',
'light.outside',
]); // lights: Record
return (
{ JSON.stringify(lights, null, 2) }
);
};
...
```
### `useHistory(entityId: string, config?: HistoryConfig)`
---
Retrieves the history for an entity's state. The optional `config` parameter takes two fields:
- `start: Date` - the starting time/date to base the history on
- `end: Date` - the ending time/date to base the history on
By default, this period is the last 24hrs.
**Types:**
```ts
type Datum = { last_changed: Date, state: string }
interface HistoryConfig = {
start?: Date;
end?: Date;
}
```
**Returns:** `{ history: Datum[]; entity: HassEntity | undefined }`
**Example:**
```tsx
...
const Card = () => {
const { history, entity } = useConfig(); // { history: Datum[]; entity?: HassEntity }
return (
{ entity?.attributes.friendly_name }:
{ entity?.state }
Changed
{' '}
{ history.length }
{' '}
times.
);
};
...
```
### `useUser()`
---
Retrieves the currently signed in user and its corresponding `entity`.
**Returns:** `(CurrentUser & { entity: HassEntity | undefined }) | undefined`
**Example:**
```tsx
...
const Card = () => {
const user = useUser(); // user: (CurrentUser & { entity: HassEntity | undefined }) | undefined
return (
{ user?.name }
);
};
...
```
### `useHass()`
---
Retrieves current Home Assistant instance. Useful for API/service calls.
**Returns:** `HomeAssistant | undefined`
**Example:**
```tsx
...
const Card = () => {
const hass = useHass(); // hass: HomeAssistant | undefined
return (
{}
}
>
Restart
);
};
...
```
### `useConfig()`
---
Retrieves the current config of the card. Note that `Config` is a type should be customized to the given card's use case.
**Returns:** `Config | undefined`
**Example:**
```tsx
...
const Card = () => {
const config = useConfig(); // config: Config | undefined
return (
{ config?.type }
);
};
...
```
[](https://postimg.cc/Js3Q34nH)