This repository contains the minimal set of code required to create your own custom Dash component.
To create your own Dash component:
- Fork this repo
- Find-and-replace:
my_dash_component
with your component library name.my-dash-component
with your component library name.my-name
with your name andmy-email
with your email addressmy-license
with your license (e.g.MIT
)- Rename the folder
my_dash_component/
with your component library name
- Install the dependencies:
npm install
- Open up the JavaScript demo environment:
npm run start
-
Write your component code in
src/lib/components
. There is a sample component calledExampleComponent.react.js
that you can use for inspiration. The demo app is insrc/demo
and you will import your example component code into your demo app. -
Test your code in a Python environment:
- Build your code
npm run build:js-dev npm run build:py
- Run and modify the
usage.py
sample dash app:
python usage.py
-
Create a production build and publish:
- Build your code:
npm run build:js npm run build:py
- Create a Python tarball
python setup.py sdist
This distribution tarball will get generated in the
dist/
folder- Test your tarball by copying it into a new environment and installing it locally:
pip install my_dash_component-0.0.1.tar.gz
- If it works, then you can publish the component to NPM and PyPI:
npm run publish
twine upload dist/dash_component-0.0.1.tar.gz
-
Share your component with the community! https://community.plot.ly/c/dash
- Include CSS files in your distribution folder (
my_dash_component
) and reference them inMANIFEST.in
- The
tests
folder contains a sample integration test. This will run a sample Dash app in a browser. Run this with:The Dash team uses these types of integration tests extensively. Browse the Dash component code on GitHub for more examples of testing (e.g. https://github.com/plotly/dash-core-components)python -m tests.test_render
- Publishing your component to NPM will make the JavaScript bundles available on the unpkg CDN. By default, Dash servers the component library's CSS and JS from the remote unpkg CDN, so if you haven't published the component package to NPM you'll need to set the
serve_locally
flags toTrue
. We will eventually makeserve_locally=True
the default, follow our progress in this issue. - Watch the component boilerplate repository to stay informed of changes to our components.
- Learn more about Dash: https://dash.plot.ly
- View the original component boilerplate: https://github.com/plotly/dash-component-boilerplate