How to use other people's react components in my dash app?

I would like to include a 5-star user editable rating in my dash app, similar to what’s asked in this thread which leads to this github page where someone seem to have built it.

However, I am not sure how to leverage the work that person has done. Documentation on official website focuses on how to build such components. Many blogs like this one also seem to give you tutorials on how to create such components.

What are the steps one should follow to leverage other people’s react components into a dash app? There is a plethora of those components outthere (good list here) so I assume there is an easy way to use them in my apps, just not sure how.

PS: apologies if I am just confused by the lenghty instructions. I am very familiar with dash and python, not at all with react and javascript… same question asked on stackoverflow

Let me help you. I just wrapped this Stars repo to dash-grocery.

It is unlikely that you can wrap components without having any knowledge of React at all. There are no shortcuts, and maybe it would be nice to spend some time learning about React.

pip install dash-grocery
import dash_grocery
from dash import Dash, html

app = Dash(__name__)

app.layout = html.Div(
    [
        dash_grocery.Stars(count=5, color2="red", size=150, char="❤", edit=True),
        dash_grocery.Stars(count=5, value=3, size=150, char="☻"),
        dash_grocery.Stars(count=5, size=150, edit=True),
    ]
)


if __name__ == "__main__":
    app.run(debug=True)

2 Likes

@stu That’s awesome! The Stars component will come in handy in lots of app!

I give it 5 stars :star2: :star2: :star2: :star2: :star2:

2 Likes

That’s amazing! Thanks a lot for your help on this :smile:

Could you point me at some documentation/tutorial explaining what is you’ve done to wrap this repo into dash-grocery? It might come in handy in future to know how to do that.

You should use this template to get started,

While setting up the dev environment can be a bit challenging to newcomers, writing the actual wrapper for components that don’t require any data flow back to Dash (or passing any complicated props) is pretty simple. It’s more-or-less just importing the React component you need, rendering it, and specifying the Dash props and their types. Here is the source code for the Ticker component for example,

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

/**
 * A light wrapper of ReactTicker.
 */
export default class Ticker extends Component {

    render() {
        return (
            <ReactTicker {...this.props}>
                {({index}) => (
                    <>
                        {this.props.children}
                    </>
                )}
            </ReactTicker>
        );
    }

}

Ticker.propTypes = {

    direction: PropTypes.oneOf(["toRight", "toLeft"]),

    mode: PropTypes.oneOf(["chain", "await", "smooth"]),

    move: PropTypes.bool,

    offset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

    speed: PropTypes.number,

    height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

    // Dash props.

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

    /**
     * The children of this component
     */
    children: PropTypes.node,

    /**
     * The class of the component
     */
    className: PropTypes.string,

};

that wraps react-ticker. Even if you aren’t familiar with React (which I would recommend that you get), it should be more-or-less understandable :slight_smile:

Thanks @Emil will give this a deeper look.

One more question to you and @stu I have tried using the stars component in a callback with an input trigger on the value property of the component. I was expecting that clicking on the star component would trigger my callback but it doesn’t. Any clue why that could be the case?

Yes, that’s what I meant by data flow back to Dash. That has to be implemented explicitly. Looking at the source code, this hasn’t been done (yet), so you won’t be able to connect callbacks to the component in the current form.

Got you. thanks @Emil !

@stu any chance you could help me this as well? Essentially would need the ‘value’ property to trigger callbacks so that something can happen on the back of the user choosing a rating with those stars.

Yes, there is an onChange property, actually I don’t know how to treat it properly. Anyway, PRs are welcome! :laughing:

Thank you @stu - @Emil any chance you could give us a hand here?