React-based custom panel starter kit for Home Assistant
This project will help you get started with building a custom panel for Home Assistant using the React framework.
This guide expects NodeJS 8 or later and Yarn to be installed.
First, we're going to get a copy of this repo and install the dependencies:
npx degit home-assistant/custom-panel-starter-kit-react cd custom-panel-starter-kit-react yarn
For testing purporses, let's start a testing server:
Keep the server running. Now add the following entry to your
panel_custom: # This is the name of the web component that will be defined by the panel - name: react-panel sidebar_title: React Demo sidebar_icon: mdi:react # This is the url that will load the panel url_path: react-panel-demo # Location where the panel is hosted during development js_url: http://localhost:8080/main.js # We want to load in an iframe to work around limitations in React embed_iframe: true # This will be available as prop `panel.config`. config: name: World
Restart Home Assistant.
Sharing your work
To build a new version of your panel, run:
This will generate a new build of the panel in the
dist folder. Copy the content of this folder and place it in
<home assistant config>/www/my-panel.
This will make it available from Home Assistant via the url
We then have to configure Home Assitant to use it:
panel_custom: - name: react-panel sidebar_title: React Prod sidebar_icon: mdi:react url_path: react-panel-prod js_url: /local/my-panel/main.js embed_iframe: true config: name: World
Sharing your work - advanced
Once your panel grows more complex and you need to load extra files (either CSS or JS), you will need to know in advance where your panel will be hosted. You can configure where it will be hosted by adjusting the
panelServingUrl value in
You can use this url inside your code by using the variable
If you need to support older browsers, you will have to enable transpilation to ES5 (out of scope for this tutorial). However, once
you've done this, defining the web component to hook into Home Assistant will require a little bit
of extra work. Open index.js and replace the call to
customElements.define with the following:
window.loadES5Adapter().then(() => customElements.define('react-panel', ReactPanelElement(Panel)));