mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-08-11 10:19:41 +00:00
.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
1.3 KiB
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.