# React Color Picker > A carefully crafted color picker for React. Demo: [jslog.com/react-color-picker](http://jslog.com/react-color-picker) No images have been used in the making of this color picker :) ![Color Picker](https://cloud.githubusercontent.com/assets/512416/5023604/0761ac7a-6aca-11e4-90db-d8678be7c267.PNG) ## Install #### npm ```sh $ 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**) ```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

{this.state.color}

} } render(, document.getElementById('content')) ``` 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' ``` ## SaturationSpectrum You can use only the saturation spectrum if that is what you need. ```jsx import React from 'react' import { SaturationSpectrum } from 'react-color-picker' ``` ## Properties 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`, 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](https://github.com/zippyui/react-color-picker/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](http://localhost:8080/) Before building a new version, make sure you run ```sh $ npm run build ``` which compiles the `src` folder (which contains jsx & ES6 files) into the `lib` folder (only valid EcmaScript 5 files). ## License #### MIT

	Stars	Issues	Version	Updated	Created
rc-color-picker	420	12	1.2.6	6 years ago	8 years ago
react-color			2.19.3	3 years ago	9 years ago
react-color-picker			4.0.2	8 years ago	10 years ago
react-colors-picker			2.3.1	8 years ago	9 years ago

rc-color-picker vs react-color vs react-color-picker vs react-colors-picker

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past