@jedwatson/react-color

A Collection of Color Pickers from Sketch, Photoshop, Chrome & more

Stats

StarsIssuesVersionUpdatedCreatedSize
@jedwatson/react-color
10,0351671.3.85 years ago6 years agoMinified + gzip package size for @jedwatson/react-color in KB

Readme

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

Installation & Usage

npm install react-color --save

Include the Component

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.

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.