🎨 Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more
kwarr128 and elvisvoer fix circular dependency between components/common/Swatch.js and compo…

there is a circular dependency between components/common/Swatch.js and components/common/index.js. Index imports Swatch in order to export it, but Swatch is also importing Checkboard from index instead of just directly importing it from Checkboard.js.

My build setup was complaining about the circular dependency when directly doing `import SketchPicker from 'react-color/lib/Sketch';` to get just the sketch picker. Doing `import { SketchPicker } from 'react-color';` gave no warning, but also pulls all the other stuff into my build that isn't needed.
Latest commit f2f9496 Apr 25, 2018


React Color

Npm Version Build Status License Downloads

  • 13 Different Pickers - Sketch, Photoshop, Chrome and many more

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



Live Demo

Installation & Usage

npm install react-color --save

Include the Component

import React from 'react'
import { SketchPicker } from 'react-color'

class Component extends React.Component {

  render() {
    return <SketchPicker />

You can import AlphaPicker BlockPicker ChromePicker CirclePicker CompactPicker GithubPicker HuePicker MaterialPicker PhotoshopPicker SketchPicker SliderPicker SwatchesPicker TwitterPicker respectively.

100% inline styles via ReactCSS