Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/brandymint/react-color-picker

React Color Picker
https://github.com/brandymint/react-color-picker

Last synced: about 2 months ago
JSON representation

React Color Picker

Awesome Lists containing this project

README

        

# React Color Picker

Demo: [jslog.com/react-color-picker](http://jslog.com/react-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
```

#### Bower

```sh
bower install react-color-picker
```

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

#### 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 (




{COLOR}


)
}
})

React.renderComponent(App(), document.body)

```

Example (**uncontrolled**)
```jsx
React.renderComponent(
,
document.body
)

```

## HueSpectrum

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

```

## SaturationSpectrum

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

```

## 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

## Development

In order to make new build, run

```sh
$ npm run build
```