React Color Picker
npm install ping-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 :)
#### npm
``sh`
$ npm install react-color-picker
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.
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)
`jsx
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 (
React.renderComponent(App(), document.body)
`
Example (uncontrolled)
`jsx
React.renderComponent(
document.body
)
`
You can use only the hue spectrum if that is what you need.
`jsx
var React = require('react')
var HueSpectrum = require('react-color-picker').HueSpectrum
`
You can use only the saturation spectrum if that is what you need.
`jsx
var React = require('react')
var SaturationSpectrum = require('react-color-picker').SaturationSpectrum
`
It's best if you specify a fixed size for the color picker.
Available options:
* saturationWidth
* saturationHeight
* hueWidth
* hueHeight (defaults to saturationHeight)
`jsx`
You can specify any other properties on the ColorPicker, including className, style, etcColorPicker
The will always have a css class color-picker
The ColorPicker, the HueSpectrum and the SaturationSpectrum all accept onDrag and onChange callbacks.
Called during the dragging operation.
Called after mouse up - when the color has been selected
Use Github issues for feature requests and bug reports.
We actively welcome pull requests.
For setting up & starting the project locally, use:
`sh`
$ git clone https://github.com/zippyui/react-color-picker
$ cd react-color-picker
$ npm install
$ npm run dev
Now navigate to localhost:8090
Before building a new version, make sure you run
`sh`
$ npm run build
which compiles the folder (which contains jsx & ES6 files) into the lib` folder (only valid EcmaScript 5 files).
#### MIT