Photo by Chris Liverani on Unsplash

Creating Custom Plotly Dash Components

by Using React in Python

Hi. In this text, I am going to tell you how we can create our own components in Plotly Dash. You can access the repo I have created to test the process by using the link below.

GitHub — mebaysan/CustomDashReactComponent

Image by Author

Introduction

There is a well-documented article to create your components written by Plotly. However, I will directly start by creating a custom project using the boilerplate. I will explain the core concepts and create a custom component to show how we can do that.

Creating Working Environment

I am going to create a virtual environment and install the requirements, then create a project by using cookiecutter.

python3 -m virtualenv venv
source venv/bin/activate
pip install cookiecutter
cookiecutter gh:plotly/dash-component-boilerplate

Image by Author

Folder Structure

• We develop our components in /src/lib/components/*.react.js files
• We can test our components by using /src/demo/App.js file (a React app)
• *We have to point out the props by using Component.propTypes={}
• *We have to use setProps props to bind our custom components with Dash callbacks. If we want to update our component from Dash components, we have to use setProps property.
• *We have to import and export all components we created inside the ./src/lib/index.js ./src/lib/index.js file

Starting To Create Component

I am going to locate my terminal in the project folder and then install the requirements.

cd custom_baysan_components
pip install -r requirements.txt

I am going to create MyTextInput.react.js file in the src/lib/components folder. The component creates a simple text input and a p element. When we write something into the text input, the p element will be automatically updated.

import React, {useState} from 'react';
import PropTypes from 'prop-types';
/**
* MyTextInput is an example component.
* It takes a property, `label`, and
* displays it.
* It renders an input with the property `value`
* which is editable by the user.
*/
const MyTextInput = (props) => {
const [value, setValue] = useState(props.value);
const updateValue = (e) => {
setValue(e.target.value);
props.setProps({value: e.target.value});
};
return (
<>
{/* <label>{props.label != null ? props.label : 'DEFAULT LABEL'}</label> */}
<label>{props.label}</label>
<br />
<input
value={props.setProps ? props.value : value}
onChange={updateValue}
/>
<p>{value}</p>
</>
);
};
MyTextInput.defaultProps = {
label: 'Default Label with defaultProps',
};
MyTextInput.propTypes = {
/**
* The ID used to identify this component in Dash callbacks.
*/
id: PropTypes.string,
/**
* The label used to show above of the input
*/
label: PropTypes.string,
/**
* The value used to set the default value for the input
*/
value: PropTypes.string,
};
export default MyTextInput;

Properties: The Most Important Fields On The Way Being Pythonic

Dash will give an error to us, and will not convert our React components to Python classes if we don’t point out each property that will come for the component. To handle this issue, we have to define each property like the ones below. Also, we can write docs for them by using comment lines.

MyTextInput.propTypes = {
/**
* The ID used to identify this component in Dash callbacks.
*/
id: PropTypes.string,
/**
* The label used to show above of the input
*/
label: PropTypes.string,
/**
* The value used to set the default value for the input
*/
value: PropTypes.string,
};

Also, we can create default values for properties. If we define that, it will not be a must to give the properties defined in the defaultProps from Python.

MyTextInput.defaultProps = {
label: 'Default Label with defaultProps',
};

Registering The Component

We need to import and export the components we created in src/index.js file. Else, we can not convert the component to Python classes.

/* eslint-disable import/prefer-default-export */
import MyTextInput from "./components/MyTextInput.react";
export {
MyTextInput
};

Generating The Component

We are ready to convert our component to Python class (Dash component). We use npm run build command to convert our React components to Python classes.

npm run build

Image by Author

Then, automatically the component will be converted to Python class under the custom_baysan_component file.

Image by Author

Using The Component

To test the component, there is a basic Dash app in usage.py file. I am going to import the component from the Python module which is created by npm run build command.

from custom_baysan_components.MyTextInput import MyTextInput

There will be a Python package with the same name as the project we created by using cookiecutter .

Image by Author

And here is the output of the code.

Image by Author

Finally

Hopefully, it was helpful and you enjoyed it. I didn’t deep dive into the basic topics like what React is or what hooks are in React. Because they weren’t the goals for this story. Also, you can find another example about using Ant-design Charts in the repo below.

GitHub - mebaysan/CustomDashReactComponent

Regards.