# React Color Picker Component

**URL:** <https://community.plotly.com/t/react-color-picker-component/8212>\
**Category:** Dash Python\
**Created:** [February 7, 2018, 3:52pm UTC](https://community.plotly.com/t/react-color-picker-component/8212 "2018-02-07T15:52:25Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ostinchuk](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/ostinchuk/32/2017_2.png) [@ostinchuk](https://community.plotly.com/u/ostinchuk)\
**Post date:** [February 7, 2018, 3:52pm UTC](https://community.plotly.com/t/react-color-picker-component/8212/1 "2018-02-07T15:52:25Z")

</div>

Hello!

Is there a color picker component for DASH like this one (check the last example) - [http://casesandberg.github.io/react-color/#examples](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
    };
```

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [February 7, 2018, 4:50pm UTC](https://community.plotly.com/t/react-color-picker-component/8212/2 "2018-02-07T16:50:08Z")

</div>

Awesome! This will be a great component. There is a colorscales picker: [https://github.com/plotly/dash-colorscales](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:

```auto
ColorPicker(color='blue')

```

Which would correspond to

```auto
ColorPicker.propTypes = {
     /** 
      * The currently selected color
      */
    color: PropTypes.string
}

```

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [February 7, 2018, 4:50pm UTC](https://community.plotly.com/t/react-color-picker-component/8212/3 "2018-02-07T16:50:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [February 7, 2018, 4:51pm UTC](https://community.plotly.com/t/react-color-picker-component/8212/4 "2018-02-07T16:51:29Z")

</div>

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](https://reactjs.org/docs/typechecking-with-proptypes.html)

---

<div class="post-metadata">

**Author:** ![ostinchuk](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/ostinchuk/32/2017_2.png) [@ostinchuk](https://community.plotly.com/u/ostinchuk)\
**Post date:** [February 7, 2018, 5:39pm UTC](https://community.plotly.com/t/react-color-picker-component/8212/5 "2018-02-07T17:39:25Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![jack](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jack/32/11_2.png) [@jack](https://community.plotly.com/u/jack)\
**Post date:** [July 30, 2018, 7:24pm UTC](https://community.plotly.com/t/react-color-picker-component/8212/6 "2018-07-30T19:24:11Z")

</div>

Dash DAQ comes with a color picker component: [https://www.dashdaq.io/](https://www.dashdaq.io/)

---

<div class="post-metadata">

**Author:** ![jack](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jack/32/11_2.png) [@jack](https://community.plotly.com/u/jack)\
**Post date:** [January 20, 2019, 7:08pm UTC](https://community.plotly.com/t/react-color-picker-component/8212/7 "2019-01-20T19:08:20Z")

</div>

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](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](https://github.com/plotly/dash-daq-monorepo)