Adding Custom Components to Python Dash

How to build custom dash components for python dash

Nathan Rupert: https://www.flickr.com/photos/nathaninsandiego/

In this blog, I will show you how to add your own custom dash react components. It builds on the official dash creating your own components tutorial. The motivation for writing this, is that I tried to follow the original guide and I found it somewhat confusing.

I will look into setting up the framework for adding custom components to our dash application and highlight the key areas to watch out for. Then I will add multiple custom components which include a calendar component using react-calendar and an editor component using react-quill. The code for all this can be found on the following Github repo dash-custom-components-blog.

This is not for beginners in react and dash, as I am assuming you have some base knowledge of both of these technologies and will not go into detail regarding setting them up. Each step will correspond to a branch in the Github repository to make it easy for you to follow along.

Initial Set up

The initial set up consists of a standard hello world dash project as indicated in the the step-1 branch of the repo. We first need to install the dash-component-boilerplate which is simply a cookie cutter template for dash components. To install the boilerplate we need to run cookiecutter on the boiler plate repo. Ideally the cookiecutter package should be installed in a virtual environment and the command to do so is as follows:

$ pip install cookiecutter
$ cookiecutter https://github.com/plotly/dash-component-boilerplate.git

The first command installs cookiecutter, and the second generates the new dash component project. The cookiecutter command asks some questions about the project, which should be similar to:

> project_name [my dash component]: custom_components
> project_shortname [custom_components]:
> component_name [CustomComponents]: MyCustomComponent
> jl_prefix []:
> r_prefix []:
> author_name [Enter your first and last name (For package.json)]: mark
> author_email [Enter your email (For package.json)]: mark@mbele.io
> github_org []:
> description [Project Description]:
> Select license:
1 - MIT License
2 - BSD License
3 - ISC License
4 - Apache Software…