react-colorpickr v4.3.0

A colorpicker for React

Demo

Install

npm install react-colorpickr

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

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

Usage

var React = require('react');
var ColorPicker = require('react-colorpickr');

var App = React.createClass({
  getInitialState: function() {
    return {
      color: 'rgba(56, 130, 184, 1)'
    };
  },

  onChange: function(color) {
    console.log(color);
  },

  render: function() {
    return (
      <div>
        <ColorPicker
          value={this.state.color}
          onChange={this.onChange} />
      </div>
    );
  }
});

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

value

Accepts a string formatted as: HSV, HSVA, HSL, HSLA, RGBA, RGBA, HEX, named colors (e.g 'red'). If this isn't provided, a default color is used.

mode

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

colorAttribute

Defaults to h. Initializes which color attribute is active. Possible options: h, s, v, 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.

Developing

npm install & npm start

Inspired by https://github.com/wangzuo/react-input-color