Include Component

Import a color picker from react-color at the top of a component and then use it in the render function:

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.

You can also import a picker individually to optimize your bundle size.

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