A colorpicker for React

react-colorpickr

A colorpicker for React.

Install

npm install @mapbox/react-colorpickr

You'll also want to include a copy of colorpickr.css in your code.

<link href='react-colorpickr.css' rel='stylesheet' />

Usage

import React from 'react'
import ColorPicker from '@mapbox/react-colorpickr'

export default class Example extends React.PureComponent {
  onChange = color => {
    console.log(color);
  };

  render() {
    return (
      <ColorPicker onChange={this.onChange} />
    )
  }
}

Required properties

onChange

Value should be a function and is called whenever a color is updated from
the colorpicker. Returns a color object.

Optional properties

theme

By default, react-colorpickr depends on Assembly and the CSS located in dist/colorpickr.css. You can however, override it thanks to react-themeable which react-colorpickr uses internally. See the properties used and the class name values in theme.js.

initialValue

Accepts any valid css color. If this isn't provided, a default color is used.

mode

Defaults to hsl. Initializes which color model tab is active.
Possible options: hsl, rgb.

channel

Defaults to h. Initializes which color channel is active.
Possible options: h, s, l, r, g, b.

reset

If reset is provided as a property with a value of true a reset button is
added that when pressed, reverts back to the original color when the
colorpicker is initialized on the page. Defaults to true.

mounted

To use internal methods from react-colorpickr, mounted provides access to the components instance. This is helpful for calling methods like overrideValue that can manually set a new color.

instance = null;

setInstance = picker => {
  this.instance = picker;
};

override = () => {
  this.instance.overrideValue('red');
};

render() {
  <div>
    <ColorPickr mounted={this.setInstance} onChange={console.log} />
    <button onClick={this.override}>Override</button>
  </div>
}

GitHub