react-color

You can import and use any of the available picker components. The library provides 13 different pickers including Sketch, Photoshop, Chrome, and more. All components use 100% inline styles via ReactCSS.

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

class Component extends React.Component {

  render() {
    return <SketchPicker />
  }
}

To build a custom color picker, you must create a top-level component to act as a bridge and wrap it with the CustomPicker higher-order component (HOC) from react-color.

Your component will receive the following props from the CustomPicker HOC:

• hex: A string representing the current color in hex format.
• rgb: An object representing the current color in RGB format.
• hsl: An object representing the current color in HSL format.
• onChange: A callback function that must be invoked to propagate color changes. You can pass a hex string, or an rgb or hsl object to this function.

import React from 'react';
import { CustomPicker } from 'react-color';

class MyColorPicker extends React.Component {
  render() {
    // Access props like hex, rgb, hsl, and onChange here
    return <div>MyColorPicker</div>;
  }
}

export default CustomPicker(MyColorPicker);

To use react-color in your project, install the package using npm with the --save flag to add it to your dependencies.

npm install react-color --save

To use a color picker, import the desired picker component from react-color and include it within your component's render function.

Available picker components include:

• AlphaPicker
• BlockPicker
• ChromePicker
• CirclePicker
• CompactPicker
• GithubPicker
• HuePicker
• MaterialPicker
• PhotoshopPicker
• SketchPicker
• SliderPicker
• SwatchesPicker
• TwitterPicker

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

class Component extends React.Component {

  render() {
    return <SketchPicker />;
  }
}

Instead of importing from the main react-color entry point, you can import specific pickers directly from their respective files in react-color/lib/ to reduce your final bundle size.

import SketchPicker from 'react-color/lib/Sketch';
import ChromePicker from 'react-color/lib/Chrome';

The onChange prop accepts a callback function that is triggered every time the color is modified. This is useful for updating the state of a parent component in real-time.

Note on Performance: Because onChange is called during drag events, it can fire very frequently. If you only need to capture the final color after a user has finished interacting with the picker, use onChangeComplete instead to avoid unnecessary re-renders or heavy computations.

import React from 'react';
import { SwatchesPicker } from 'react-color';

class Component extends React.Component {

  handleChange(color, event) {
    // The color object contains:
    // hex: string
    // rgb: { r, g, b, a }
    // hsl: { h, s, l, a }
  }

  render() {
    return <SwatchesPicker onChange={ this.handleChange } />;
  }
}

You can override the default inline styles of any color picker component by passing a styles object to the styles prop.

The styles object follows a specific hierarchy:

1. A top-level key (e.g., default) which allows you to target specific themes or states.
2. A nested key representing the specific part of the picker you wish to style (e.g., picker). You should refer to the individual picker's source code to identify the exact keys available for styling.
3. Standard CSS property names as keys.

Example of overriding the boxShadow on a SketchPicker:

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

const sketchPickerStyles = {
  default: {
    picker: {
      boxShadow: 'none',
    },
  },
}

export default class Component extends React.Component {
  render() {
    return (
      <SketchPicker styles={sketchPickerStyles} />
    )
  }
}

The following picker components are available for import from react-color:

• AlphaPicker
• BlockPicker
• ChromePicker
• CirclePicker
• CompactPicker
• GithubPicker
• HuePicker
• MaterialPicker
• PhotoshopPicker
• SketchPicker
• SliderPicker
• SwatchesPicker
• TwitterPicker

When the onChange callback is invoked, it receives a color object containing the current color values in several formats. The object structure is as follows:

{
  hex: '#333',
  rgb: {
    r: 51,
    g: 51,
    b: 51,
    a: 1,
  },
  hsl: {
    h: 0,
    s: 0,
    l: .20,
    a: 1,
  }
}