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…