Package Exports

react-color-picker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-color-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Color Picker

A carefully crafted color picker for React.

Demo: jslog.com/react-color-picker

No images have been used in the making of this color picker :)

Color Picker

Install

npm

$ npm install react-color-picker

Changelog

See changelog

Other

Use dist/react-color-picker.js, which uses umd (exported as ColorPicker).

Use version >=2.0.0 for React >=0.12.0. For previous React versions, use ==1.4.1.

Usage

react-color-picker does not include React (not even in dist/react-color-picker.js) so you'll have to manually include that.

You can have either controlled (using value) or uncontrolled (using defaultValue) pickers.

Please don't forget to include the styles!!! - `index.css` or `index.styl`

Example (controlled)

var React = require('react')
var ColorPicker = require('react-color-picker')

var App = React.createClass({

    displayName: 'App',

    onDrag: function(color, c){
        COLOR = color
        this.setState({})
    },

    render: function(){

        return (
            <div>
                <ColorPicker value={COLOR} onDrag={this.onDrag} />
                <div style={{background: COLOR, width: 100, height: 50, color: 'white'}}>
                    {COLOR}
                </div>
            </div>
        )
    }
})

React.renderComponent(App(), document.body)

Example (uncontrolled)

React.renderComponent(
    <ColorPicker defaultValue='#452135'/>,
    document.body
)

HueSpectrum

You can use only the hue spectrum if that is what you need.

var React = require('react')
var HueSpectrum = require('react-color-picker').HueSpectrum

<HueSpectrum value={color} width={100}/>
<HueSpectrum defaultValue="red" />

SaturationSpectrum

You can use only the saturation spectrum if that is what you need.

var React = require('react')
var SaturationSpectrum = require('react-color-picker').SaturationSpectrum

<SaturationSpectrum value={color} height={400}/>
<SaturationSpectrum defaultValue="red" />

Properties

It's best if you specify a fixed size for the color picker.

Available options:

saturationWidth
saturationHeight
hueWidth
hueHeight (defaults to saturationHeight)

<ColorPicker value={color} saturationWidth={400} saturationHeight={500} />
<ColorPicker value={color} saturationWidth={400} saturationHeight={500} hueWidth={100}/>

You can specify any other properties on the ColorPicker, including className, style, etc The ColorPicker will always have a css class color-picker

The ColorPicker, the HueSpectrum and the SaturationSpectrum all accept onDrag and onChange callbacks.

onDrag(colorString)

Called during the dragging operation.

onChange(colorString)

Called after mouse up - when the color has been selected

Contributing

Use Github issues for feature requests and bug reports.

We actively welcome pull requests.

For setting up & starting the project locally, use:

$ git clone https://github.com/zippyui/react-color-picker
$ cd react-color-picker
$ npm install
$ npm dev

Now navigate to localhost:8090

Before building a new version, make sure you run

$ npm run build

which compiles the src folder (which contains jsx & ES6 files) into the lib folder (only valid EcmaScript 5 files).

JSPM