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
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.
index.css
or index.styl
Please don't forget to include the styles!!! - Example (controlled)
var React = var ColorPicker = var App = React React
Example (uncontrolled)
React
HueSpectrum
You can use only the hue spectrum if that is what you need.
var React = var HueSpectrum = HueSpectrum <HueSpectrum = =/><HueSpectrum ="red" />
SaturationSpectrum
You can use only the saturation spectrum if that is what you need.
var React = var SaturationSpectrum = SaturationSpectrum <SaturationSpectrum = =/><SaturationSpectrum ="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 = = = /><ColorPicker = = = =/>
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 run 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).