React Color Picker Component

Dash Python
1

Hello!

Is there a color picker component for DASH like this one (check the last example) - http://casesandberg.github.io/react-color/#examples

I started writing my own component but stuck where you need to construct propTypes dictionary.

Here is my ExampleComponent.react.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import reactCSS from 'reactcss'
import { SketchPicker } from 'react-color'

    /**
     * Some useful text.
     */
    export default class SketchExample extends React.Component {
      state = {
        displayColorPicker: false,
        color: {
          r: '241',
          g: '112',
          b: '19',
          a: '1',
        },
      };

      handleClick = () => {
        this.setState({ displayColorPicker: !this.state.displayColorPicker })
      };

      handleClose = () => {
        this.setState({ displayColorPicker: false })
      };

      handleChange = (color) => {
        this.setState({ color: color.rgb })
      };

      render() {

        const styles = reactCSS({
          'default': {
            color: {
              width: '36px',
              height: '14px',
              borderRadius: '2px',
              background: `rgba(${ this.state.color.r }, ${ this.state.color.g }, ${ this.state.color.b }, ${ this.state.color.a })`,
            },
            swatch: {
              padding: '5px',
              background: '#fff',
              borderRadius: '1px',
              boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
              display: 'inline-block',
              cursor: 'pointer',
            },
            popover: {
              position: 'absolute',
              zIndex: '2',
            },
            cover: {
              position: 'fixed',
              top: '0px',
              right: '0px',
              bottom: '0px',
              left: '0px',
            },
          },
        });

        return (
          <div id={id}>
            <div style={ styles.swatch } onClick={ this.handleClick }>
              <div style={ styles.color } />
            </div>
            { this.state.displayColorPicker ? <div style={ styles.popover }>
              <div style={ styles.cover } onClick={ this.handleClose }/>
              <SketchPicker color={ this.state.color } onChange={ this.handleChange } />
            </div> : null }

          </div>
        )
      }
    }


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

        /** **I AM LOST HERE**
         * The value displayed in the input
         */
        value: PropTypes.string,

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

Awesome! This will be a great component. There is a colorscales picker: https://github.com/plotly/dash-colorscales but not yet a simple color picker.

The propTypes just define the types of the this.props values. These prop-types will end up being the attributes of your Python component, i.e. you might have:

ColorPicker(color='blue')

Which would correspond to

ColorPicker.propTypes = {
     /** 
      * The currently selected color
      */
    color: PropTypes.string
}
1 Like
3

I also recommend looking through some of the existing components in https://github.com/plotly/dash-core-components/ for guidance

4

Also, here is the official react docs on propTypes, a good reference to see which properties are available: https://reactjs.org/docs/typechecking-with-proptypes.html

5

@chriddyp, Thank you for advice and links. I knew about dash-colorscales but would like to have something more flexible and less complex. If I’ll get something that will work, I’ll share it here with my app.

6

Dash DAQ comes with a color picker component: https://www.dashdaq.io/

1 Like
7

Dash DAQ (including the color picker component) is now open-source and completely free.

You can get started with Dash DAQ here: https://dash.plot.ly/dash-daq

The source code for all of the instrumentation examples can be found on GitHub here: https://github.com/plotly/dash-daq-monorepo