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

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

Last synced: about 6 hours ago
JSON representation

React Color Picker

• Host: GitHub
• URL: https://github.com/brandymint/react-color-picker
• Owner: BrandyMint
• License: mit
• Created: 2015-04-16T15:23:21.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-04-17T12:45:19.000Z (over 9 years ago)
• Last Synced: 2023-03-10T22:28:56.936Z (over 1 year ago)
• Language: JavaScript
• Homepage: http://jslog.com/react-color-picker
• Size: 11.3 MB
• Stars: 0
• Watchers: 4
• Forks: 18
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

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

```