# react-color

**Repository Path**: mirrors_JedWatson/react-color

## Basic Information

- **Project Name**: react-color
- **Description**: Color Pickers from Sketch, Photoshop, Chrome & more
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-09
- **Last Updated**: 2026-02-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# [React Color](http://casesandberg.github.io/react-color/)

* **7 Different Pickers** - Sketch, Photoshop, Chrome and many more

* **Popup or Block** - It can be used it as a popup or always visible

* **Make Your Own** - Use the building block components to make your own

![Sketch and Photoshop Color Picker Built in React](http://casesandberg.github.io/react-color/screenshot.png)

## Installation & Usage

```sh
npm install react-color --save
```

### Include the Component

```js
var React = require('react');
var ColorPicker = require('react-color');

class Component extends React.Component {

  render() {
    return <ColorPicker type="sketch" />;
  }
}
```

### Display It
Display the color picker popup on click, or don't define display and it will always be visible.

```js
var React = require('react');
var ColorPicker = require('react-color');

class Component extends React.Component {

  constructor() {
    super();
    this.state = {
      displayColorPicker: false,
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ displayColorPicker: !this.state.displayColorPicker });
  }

  render() {
    return (
      <div>
        <button onClick={ this.handleClick }>Pick Color</button>
        <ColorPicker display={ this.state.displayColorPicker } type="sketch" />
      </div>
    );
  }
}
```

> 100% inline styles via [ReactCSS](http://reactcss.com/)