Add panel custom to load any webcomponent (#2747)

config/custom_components/react_panel/__init__.py

@@ -1,30 +0,0 @@
-"""
-Custom panel example showing TodoMVC using React.
-
-Will add a panel to control lights and switches using React. Allows configuring
-the title via configuration.yaml:
-
-react_panel:
-  title: 'home'
-
-"""
-import os
-
-from homeassistant.components.frontend import register_panel
-
-DOMAIN = 'react_panel'
-DEPENDENCIES = ['frontend']
-
-PANEL_PATH = os.path.join(os.path.dirname(__file__), 'panel.html')
-
-
-def setup(hass, config):
-    """Initialize custom panel."""
-    title = config.get(DOMAIN, {}).get('title')
-
-    config = None if title is None else {'title': title}
-
-    register_panel(hass, 'react', PANEL_PATH,
-                   title='TodoMVC', icon='mdi:checkbox-marked-outline',
-                   config=config)
-    return True

config/panels/react.html

@@ -1,3 +1,20 @@
+<!--
+Custom Home Assistant panel example.
+
+Currently only works in Firefox and Chrome because it uses ES6.
+
+Make sure this file is in <config>/panels/react.html
+
+Add to your configuration.yaml:
+
+panel_custom:
+  - name: react
+    sidebar_title: TodoMVC
+    sidebar_icon: mdi:checkbox-marked-outline
+    config:
+      title: Wow hello!
+-->
+
 <script src="https://fb.me/react-15.2.1.min.js"></script>
 <script src="https://fb.me/react-dom-15.2.1.min.js"></script>