plotly / dash-renderer

OBSOLETE has been merged into dash
https://github.com/plotly/dash
MIT License
97 stars 32 forks source link

Component as props support. #92

Closed T4rk1n closed 5 years ago

T4rk1n commented 5 years ago

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 commented 5 years ago

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),
};
byronz commented 5 years ago

@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 commented 2 years ago

@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 commented 2 years ago

This repo is obsolete, but the feature has just recently been revived by @T4rk1n in https://github.com/plotly/dash/pull/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 commented 2 years ago

That's great news! Thanks for sharing the link