mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-16 13:56:53 +00:00
Initial cookbook entry for the react custom panel
This commit is contained in:
parent
fd2b64a0f7
commit
23434e1c22
28
source/_cookbook/custom_panel_using_react.markdown
Normal file
28
source/_cookbook/custom_panel_using_react.markdown
Normal file
@ -0,0 +1,28 @@
|
||||
---
|
||||
layout: page
|
||||
title: "Custom Panel using React"
|
||||
description: ""
|
||||
date: 2016-07-29 12:00
|
||||
sidebar: true
|
||||
comments: false
|
||||
sharing: true
|
||||
footer: true
|
||||
ha_category: Custom Panel Examples
|
||||
---
|
||||
|
||||
This is a [React](https://facebook.github.io/react/) implementation of [TodoMVC](http://todomvc.com/) but instead of checking off to do items, you're 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.
|
||||
|
||||
All you need is available as a [custom component](https://github.com/home-assistant/home-assistant/tree/dev/config/custom_components/react_panel).
|
||||
|
||||
This video shows the frontend in action.
|
||||
|
||||
<div class='videoWrapper'>
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/2200UutdXlo" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
Loading…
x
Reference in New Issue
Block a user