Using a dash-core-component within a custom component

Dash Python
1

I am trying to create my own dash component in React, and within that component, I want to hold a plotly graph. However, I cannot for the life of me work out how to import the Graph component from dash-core-components into my own!

Below is the closest I think I have gotten, it builds just fine - but when I run the usage.py I get an error stating:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

GraphTest.react.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Graph} from 'dash-core-components';

/**
 * ExampleComponent 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.
 */
export default class GraphTest extends Component {
    render() {
        const newFigure = {
            data: [{'x': [1, 2, 3], 'y': [1, 2, 1]}]
        };
        return (
            <Graph id="graph" figure={newFigure} />
        );
    }
}

GraphTest.defaultProps = {};

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

usage.py

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

app = dash.Dash(__name__)

app.layout = html.Div([

    dash_fix.GraphTest(id="graph")

])

if __name__ == '__main__':

    app.run_server(debug=True)

I have of course installed dash-core-components with npm, and I’ve also tried changing the import name to various things such as {PlotlyGraph} as that is what it is exported as in Graph.react.js, and also importing from dash-core-components/lib etc. Nothing works!

This is within a brand new dash-component-boilerplate project, so you can easily attempt to recreate the issue yourself if needed.

Any help would be greatly appreciated!

2 Likes
2

Hi, Jake.

I’m creating a couple of components extending/using the ones from the dash-bootstrap-components.

I can guess why, but just importing the component you want to extend does not work. It does not get exported correctly to the your_module.min.js asset file that is served to the browser.

The solution I found was giving an alias to the component I want to extend like so:

import {Button as DBCButton} from 'dash-bootstrap-components' ;
import PropTypes from 'prop-types';

/**
 * MyButton extending the Button from the dash-bootstrap-components library.
 */
const MyButton = (props) => {
    // extend the functionalities the way you need...
    return (
            <DBCButton color="success">Extended</DBCButton>
    );
};

MyButton.defaultProps = {};

MyButton.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,
};

export default MyButton;

And don’t forget to add your extended component (in my case MyButton) to the index.js and export it like:

import MyButton from './components/MyButton.react';
export {
    MyButton,
};

It works, but the result is a big asset file to serve.

1 Like