npm install 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
#### Please don't forget to include the styles!!! - index.css
Example (controlled)
`jsx
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
}
render(
`
Example (uncontrolled)
`jsx
render(
document.getElementById('content')
)
`HueSpectrum
You can use only the hue spectrum if that is what you need.
`jsx
import React from 'react'
import { HueSpectrum } from 'react-color-picker'
`
You can use only the saturation spectrum if that is what you need.
`jsx
import React from 'react'
import { SaturationSpectrum } from 'react-color-picker'
`
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 dev
Now navigate to localhost:8080
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