Added Import component

demo/Demo.react.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Card, Accordion, Tabs, LoadingDialog} from '../src';
+import {Card, Accordion, Tabs, LoadingDialog, Import} from '../src';
 import '!style!css!./demo.css'; // eslint-disable-line
 
 class Demo extends Component {
@@ -50,6 +50,7 @@ class Demo extends Component {
 
         return (
             <div>
+                <Import />
                 <h1>grasia-dash-components Demo</h1>
 
                 <hr/>

src/components/Import.react.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * Import serves for the only purpose to force Dash to load grasia-dash-components.
+ * This is useful when you want to use grasia components that are going to be
+ * added dynamically to the Dash app layout.
+ */
+export default class Import extends React.Component {
+
+  render() {
+    return null;
+  }
+}
+
+Import.propTypes = {
+  /**
+  * The ID used to identify this component in Dash callbacks
+  */
+  id: PropTypes.string
+};

src/index.js

@@ -4,11 +4,13 @@ import Card from './components/Card.react';
 import Accordion from './components/Accordion.react';
 import Tabs from './components/Tabs.react';
 import LoadingDialog from './components/LoadingDialog.react';
+import Import from './components/Import.react';
 
 export {
     Accordion,
     ExampleComponent,
     Card,
     Tabs,
-    LoadingDialog
+    LoadingDialog,
+    Import
 };

usage.py

@@ -33,6 +33,8 @@ def generate_card():
 
 app.layout = html.Div([
 
+    grasia_dash_components.Import(),
+
     html.H2('Loading dialog'),
     html.Button('Show Loading Dialog', id='button'),
     grasia_dash_components.LoadingDialog(id="dialog", text="test", show=False),