Files
.github
.themes
_deploy
credits_generator
plugins
sass
source
_addons
_components
_cookbook
automation_enocean_phue.markdown
automation_first_light.markdown
automation_flashing_lights.markdown
automation_for_rainy_days.markdown
automation_kodi_dynamic_input_select.markdown
automation_sun.markdown
automation_telegram_presence_alert.markdown
automation_using_timeinterval_inputboolean.markdown
configuration_yaml_by_alok_saboo.markdown
configuration_yaml_by_aneisch.markdown
configuration_yaml_by_bah2830.markdown
configuration_yaml_by_carlo_costanzo.markdown
configuration_yaml_by_cbulock.markdown
configuration_yaml_by_chriskacerguis.markdown
configuration_yaml_by_ciquattrofpv.markdown
configuration_yaml_by_cy1701.markdown
configuration_yaml_by_danichispa.markdown
configuration_yaml_by_daniel_hoyer_iversen.markdown
configuration_yaml_by_fredsmith.markdown
configuration_yaml_by_geekofweek.markdown
configuration_yaml_by_greenturtwig.markdown
configuration_yaml_by_gstevenson.markdown
configuration_yaml_by_happyleavesaoc.markdown
configuration_yaml_by_instagraeme.markdown
configuration_yaml_by_jjmontesl.markdown
configuration_yaml_by_lancehaynie.markdown
configuration_yaml_by_mertenats.markdown
configuration_yaml_by_mf_social.markdown
configuration_yaml_by_ntalekt.markdown
configuration_yaml_by_oakbrad.markdown
configuration_yaml_by_scottocs11.markdown
configuration_yaml_by_shortbloke.markdown
configuration_yaml_by_silvrr.markdown
configuration_yaml_by_skalavala.markdown
configuration_yaml_by_stanvx.markdown
configuration_yaml_by_teagan42.markdown
configuration_yaml_by_vasiley.markdown
configuration_yaml_from_bassclarinetl2.markdown
custom_panel_using_react.markdown
custom_ui_by_andrey-git.markdown
dim_and_brighten_lights.markdown
dim_lights_when_playing_media.markdown
fail2ban.markdown
foscam_away_mode_PTZ.markdown
google_maps_card.markdown
notify_if__new_ha_release.markdown
notify_if_over_threshold.markdown
owntracks_two_mqtt_broker.markdown
perform_actions_based_on_input_select.markdown
python_component_automation.markdown
python_component_mqtt_basic.markdown
python_component_simple_alarm.markdown
restart_ha_if_wemo_switch_is_not_detected.markdown
send_a_reminder.markdown
sonos_say.markdown
track_battery_level.markdown
turn_on_light_for_10_minutes_when_motion_detected.markdown
_data
_docs
_faq
_includes
_layouts
_posts
addons
assets
blog
cloud
code_of_conduct
components
cookbook
demo
developers
docs
faq
font
getting-started
hassio
help
images
javascripts
privacy
static
tos
CNAME
atom.xml
favicon.png
googlef4f3693c209fe788.html
index.html
robots.txt
service_worker.js
version.json
.editorconfig
.gitattributes
.gitignore
.gitmodules
.powrc
.project
.ruby-version
.slugignore
.travis.yml
CLA.md
CODE_OF_CONDUCT.md
Gemfile
Gemfile.lock
LICENSE.md
README.markdown
Rakefile
_config.yml
config.rb
config.ru
home-assistant.io/source/_cookbook/custom_panel_using_react.markdown
2017-12-02 10:36:39 -08:00

1.3 KiB

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 here. Copy the file to <config dir>/panels/ (you might have to create the directory if it doesn't exist).

Create a 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.