Component as props support.

[T4rk1n]

Add support for component as props.

With this you can set a prop type as PropTypes.node, and have the props be a dash component.

[T4rk1n]

I included a component lib in a tar file with a test component that got components as props since we didn't have any for testing purpose.

Here's the component src:

import React, {Component} from 'react';
import PropTypes from 'prop-types';

/**
 * 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 ComponentProps extends Component {
    render() {
        const {id, component_props, comp_array} = this.props;

        return (
            <div id={id}>
                {component_props}
                <div>
                    {comp_array}
                </div>
            </div>
        );
    }
}

ComponentProps.defaultProps = {};

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

    /**
     * Dash-assigned callback that should be called whenever any of the
     * properties change
     */
    setProps: PropTypes.func,

    component_props: PropTypes.node,

    comp_array: PropTypes.arrayOf(PropTypes.node),
};

[chriddyp]

At first glance, it looks like this handles rendering a component that's in the layout but it doesn't handle:

• Using that component's properties as Input or State
• Updating that component's properties through Output

If we support rendering components as props, then they should be valid inputs and outputs like children.

Supporting this in a general sense will be quite a bit more work I believe. I'd prefer that we'd have a larger design discussion about how to do this before we dig in to the code. I've created an issue to discuss here: https://github.com/plotly/dash-renderer/issues/95

[byronz]

@alexcjohnson I think the changes in the treecontainer is not valid anymore and have never been addressed to Chris' review comments. a larger feature design discussion is in #95.

[codytodonnell]

@chriddyp and @T4rk1n I'm curious if there has been any movement on this issue since your discussion here. This is probably the primary limitation I run into when developing react components for Dash. I think this would be a very powerful addition. Doing this would make it much easier to integrate third party react libraries that utilize component props and it would also make it much easier to develop react components for Dash in general. It's such a common and useful pattern in react, I think it would be a huge value add not just for react-Dash developers but pure Dash developers too.

[alexcjohnson]

This repo is obsolete, but the feature has just recently been revived by @T4rk1n in plotly/dash#1965 and we expect to include it in either the next dash release or the one after. Please take a look and let us know what you think!

[codytodonnell]

That's great news! Thanks for sharing the link