Adding Custom Components to Python Dash
How to build custom dash components for python dash
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…
