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

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

JSPM