coloreact

ColoReact

A tiny Color Picker for React [ Demo ]

Install

$ npm i --save coloreact

How to use

  import ColorPicker from 'coloreact';

  // ...
  return (
    <ColorPicker
      opacity={true}
      color={this.state.currentColor}
      onChange={this.showColorNow}
      onComplete={this.showLastColor} />
    );
  // ...

Custom Parts

It is possible to create your own ColorPicker using Map and Sliders.

  import { Map, Slider } from 'coloreact';

  // ...
  return (
    <div className="myColorPicker">
      <Map
        x={this.state.saturation}
        y={this.state.value}
        max={100}
        backgroundColor={this.getHue()}
        onChange={this.handleSaturationValue}
      />
      <Slider
        vertical={true}
        value={this.state.hue}
        max={360}
        onChange={this.handleHue}
      />
    </div>  
  // ...

Examples

Live examples | Code

$ npm start
# goto http://localhost:3040/