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 :)

Install

npm

$ npm install react-color-picker

Usage

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

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

Example (controlled)

import { render } from 'react-dom'
import React from 'react'
import ColorPicker from 'react-color-picker'
 
import 'react-color-picker/index.css'
 
class App extends React.Component {
 
  constructor(props) {
    super(props)
    this.state = {
      color: 'red'
    }
  }
 
  onDrag(color, c) {
    this.setState({
      color
    })
  }
 
  render() {
    return <div>
      <ColorPicker value={this.state.color} onDrag={this.onDrag.bind(this)} />
      <div style={{
        background: this.state.color,
        width: 100,
        height: 50,
        color: 'white'
      }}>
        {this.state.color}
      </div>
    </div>
  }
 
}
 
render(<App />, document.getElementById('content'))

Example (uncontrolled)

render(
  <ColorPicker defaultValue='#452135'/>,
  document.getElementById('content')
)
 

HueSpectrum

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

import React from 'react'
import { HueSpectrum } from 'react-color-picker'
 
<HueSpectrum value={color} width={100}/>
<HueSpectrum defaultValue="red" />

SaturationSpectrum

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

import React from 'react'
import { SaturationSpectrum } from 'react-color-picker'
 
<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:8080

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

License

MIT