home-assistant.io/custom_panel_using_react.markdown at b0e07fab9812e52725e6c0da30e5ec2fc572530d

mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-05-06 02:58:57 +00:00

Mårten Seiplax b0e07fab98 Fix 404 link for react example (#9546 )

The link for the react example returns a 404

Seems it has been moved to https://github.com/home-assistant/custom-panel-starter-kit-react

Updated the link description for better accessibility (when used with text-to-speech software used by visually impaired users).

2019-06-01 20:04:29 +02:00

1.3 KiB

Raw Blame History

layout, title, description, date, sidebar, comments, sharing, footer, ha_category

layout	title	description	date	sidebar	comments	sharing	footer	ha_category
page	Custom Panel using React		2016-07-29 12:00	true	false	true	true	User Interface

This is a React implementation of TodoMVC but instead of checking off to do items, you are turning lights and switches on/off.

It uses React to render the data.
It hooks into Home Assistant JS which means updates pushed from the server are instantly rendered.
It accesses properties made available from Polymer.
It uses the user configuration for the component in the configuration.yaml file for rendering.
It allows toggling the sidebar.

Download the source for React Starter Kit here. Copy the file to <config dir>/panels/ (you might have to create the directory if it doesn't exist).

Create an entry for the panel in your configuration.yaml file to enable it.

panel_custom:
  - name: react
    sidebar_title: TodoMVC
    sidebar_icon: mdi:work
    url_path: todomvc
    config:
      title: hello

This video shows the example in action.

1.3 KiB Raw Blame History

1.3 KiB

Raw Blame History