Black Lives Matter. Please consider donating to Black Girls Code today.

Need help creating a custom dash component

Hi,

I am trying to create a custom Dash component- but am stuck. Any help would be appreciated. To brief, I am trying to bring React-color https://casesandberg.github.io/react-color/ to Dash. I downloaded the new dash boilerplate and got the new component to work in React- i.e it works fine when running in the JavaScript demo environment (opens the SketchPicker).

Next I tried to build it to python using
npm run build:js-dev
npm run build:py

The scrips ran without a problem. But when running usage.py, I am unable to use my component. It thows an error:

TypeError: Object of type ‘module’ is not JSON serializable.

Please help!

Oh yeah and I also gave the propType

Okay I got it to work :slight_smile:

I don’t know what I was doing wrong- but I reforked the boilerplate and started over again and it just worked! :smiley:

Here it is if anyone is interested:

Now I need help in getting the property out: i.e. the color

:smiley: :smiley:

@chriddyp: Hi Chris, Are you able to help me out with this? Some clues to go forward. I am unable to get the color value out.

I FINALLY GOT THIS TO WORK. My very first dash-component from React-color https://casesandberg.github.io/react-color/ :boom::boom::boom::boom:

I have published the component.

For anyone interested, you can install this component using:

pip install dash-color-picker

:slight_smile: :slight_smile: :slight_smile:

It’s a very basic component that takes color as input for the picker and outputs color selected on the picker.PNG

The readme for the dash-boilerplate needs some rework. I faced some issues while building tarball and publishing. If anyone encounters any issues, maybe I can try to help.

For people like me struggling to create custom components: please take a look at the dash-core-components repo. That helped me to figure out what to do and understanding using react better. Pay special focus to setProps, componentWillReceiveProps and setState. Also dont forget to modify package.json and manifest.in.

Could you create an issue (or better yet a pull request) in that repo to help improve it? https://github.com/plotly/dash-component-boilerplate

Yes sure. I haven’t done one before. Will have that figured out.

I have created an issue:

Based on what you think, I can try to create a pull-request (gulp) :smiley: