Convert an existing React component with a script?

[interrogator]

Hi, thanks for dash and this component creation helper, great ideas both.

Right now, I just want to use someone else's React component (https://github.com/allenai/hierplane) in my dash app, but I can't find documentation for doing that. This repo is the closest I've gotten.

I saw once an issue about creating a nice command-line script/interface for converting React apps. I think that'd be awesome, the ideal solution to this problem. Since I'm not confident with my React/npm etc, it'd be nice if I didn't have to upload my components to npm and so on, especially when they are third-party. I don't know how possible this is, but I would love if I simply do:

dash react-to-python hierplane

Anyway, I'm wondering if someone could advise me on how to convert this existing component to dash component. In the alternative, I think it'd be very valuable if someone a quick document (to go in dash docs?) guiding devs on how to do this. The current docs are good if we're creating from scratch, but I don't know how to incorporate/wrap someone else's component.

[alexcjohnson]

Yes, this repo is the right place! After you run cookiecutter as described in the README, you'll have a project folder that has its own README inside with more details.

If you're wrapping someone else's component, it should be pretty easy from that point: the component file (generated from this template) has a render method and you just insert the component you're wrapping and pass down the appropriate props. Sometimes you need to translate some props into JSON-serializable form - foremost this means getting rid of any PropTypes.func (aside from Dash's internal-use setProps), replacing these with either a hard-coded function, or perhaps an enum pointing to one of several function options.

Then if this component is going to report any of its output back to Dash as prop changes, wire up the appropriate events of the wrapped component to setProps, and you should be all set.

For inspiration, check out perhaps the dash-bio repo, components like OncoPrint are also thin wrappers around someone else's react component. Note this one has an additional layer of indirection because we recently added async loading of the JS, but the components in src/lib/fragments show how this works.

[nlyle01]

@alexcjohnson Could you elaborate a little bit more on "just insert the component you're wrapping and pass down the appropriate props"?

[alexcjohnson]

@nlyle01 following the OncoPrint example:

• add the component to your project: https://github.com/plotly/dash-bio/blob/ac0be91627a52855f76c5b9628a989935fe6346a/package.json#L44
• import it in the component file https://github.com/plotly/dash-bio/blob/ac0be91627a52855f76c5b9628a989935fe6346a/src/lib/fragments/OncoPrint.react.js#L4
• render it https://github.com/plotly/dash-bio/blob/ac0be91627a52855f76c5b9628a989935fe6346a/src/lib/fragments/OncoPrint.react.js#L30
• create a propTypes definition and defaultProps in the component file, so the Dash component generator can find it
• in this case we've made the component async so we need to import the props from the outer component, but you can ignore that at first, and just put it all in the same file.
• forward props to the rendered component https://github.com/plotly/dash-bio/blob/ac0be91627a52855f76c5b9628a989935fe6346a/src/lib/fragments/OncoPrint.react.js#L32 (note "omit" is actually discouraged... better to list all the props to forward rather than the ones not to forward)

@LiamConnors do we have this process documented somewhere? I didn't see it in a quick look.

[nlyle01]

Thank you @alexcjohnson!

[LiamConnors]

@alexcjohnson, we don't have that documented. I want to add this as part of other updates to our docs for component developers. I don't have a timeline for when that will be done yet.