Converting Responsive Grid Layout to Plotly Dash

Implementing the custom component

If you just want to use components from a library with a package available through npm (like react-grid-layout), you don’t need to re-implement the components in these libraries. You can simply install them with npm and use them in your custom component.

Example component using ResponsiveGridLayout (src/lib/components/GridLayout.react.js):

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import RGL, {WidthProvider} from 'react-grid-layout';
import '../../../node_modules/react-grid-layout/css/styles.css';
import '../../../node_modules/react-resizable/css/styles.css';

const ResponsiveGridLayout = WidthProvider(RGL);

export default class GridLayout extends Component {
    render() {
        const {id, setProps} = this.props;
        const layout = [
            {x: 0, y: 0, w: 3, h: 3, i: 'a'},
            {x: 0, y: 1, w: 3, h: 3, i: 'b'},
        ];

        return (
            <div id={id}>
                <ResponsiveGridLayout rowHeight={30}>
                    {layout.map((item) => (
                        <div key={item.i} data-grid={item}>
                            <span>{item.i}</span>
                        </div>
                    ))}
                </ResponsiveGridLayout>
            </div>
        );
    }
}

GridLayout.defaultProps = {};

GridLayout.propTypes = {
    /**
     * The ID used to identify this component in Dash callbacks.
     */
    id: PropTypes.string,

    /**
     * Dash-assigned callback that should be called to report property changes
     * to Dash, to make them available for callbacks.
     */
    setProps: PropTypes.func,
};

Environment setup (Skip if you’ve already done this)

To create and edit your custom component you need to have followed the instructions to setup the cookiecutter dash-component-boilerplate.

But to re-iterate what is said in a couple of bullet points, you need to:

• Install cookiecutter: pip install cookiecutter
• Run cookiecutter https://github.com/plotly/dash-component-boilerplate.git. This will generate the environment where you can create your custom components.
• After filling in the name you want your custom component to have you change directory into the directory generated based on the name you provided. I have chosen the name grid_layout, your structure will be different if you choose different values after being prompted by cookiecutter.
• At this point you need to install the needed python dependencies by running pip install -r requirements.txt. You can now also install react-grid-layout using npm i react-grid-layout.

Basic usage

When everything is installed we can edit the custom component inside the src/lib/components directory. When we’ve made some change (replaced the example code with the code listed above) and we are satisfied we can run npm run build to persist the changes.

After this you can run python usage.py and your dash app using your custom component will be run.

usage.py is a regular Dash application that imports the component that is generated from the react component after the build process and can look something like this:

import grid_layout
import dash
from dash.dependencies import Input, Output
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([grid_layout.GridLayout(id="grid-layout")])


if __name__ == "__main__":
    app.run_server(debug=True)

You can also edit this as you like.