Using a dash-core-component within a custom component

Dash Python
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