A toy component for using with Plotly Dash.
This component was generated using the Plotly Dash Writing your own components
instructions, see the section below for details.
The component code is available in the ./toy-component/
directory.
To install the necessary packages, test and build the component, run npm test
.
To view and test out the built component you have two options:
- Run
python usage.py
. This imports the build component code (located within the./toy-component/toy-component
directory) and launches a simple Dash app including the component. - Run
npm run demo
. This launches a development server and imports the component in a javascript/html application. This command will trigger a rebuild on code change and save, so can be quite useful for development.
To view and edit the component source code, head to ./toy-component/src/components/
and the react component will be present along with a __tests__
directory which contains the components unit tests.
To include this component in your application elsewhere, either copy the /toy-component/toy-component
directory to the root location of use, or you can install python package using python setup.py install
.
See the Plotly Dash documentation for more detailed explanation.
-
Prerequisites include:
- Node
- NPM
- Python
-
Install the builder tool:
npm install -g builder-init
-
Initialise the new project by running:
builder-init dash-components-archetype
This will walk you through a series of prompts, such as the component name etc. and create the component boilerplate code.