Helper Components

Every color picker provided is made up of a collection of helper components. Those components are accessible for you to use to make a custom color picker.

<Alpha />

Use Alpha to display a slider to toggle the alpha value. Make sure to wrap it in a div that's the size you want the slider to be and that it is position: relative.

• ...this.props - Pass down all the color props from your top-most component.
• pointer - Define a custom pointer component for the slider pointer.
• onChange - Function callback. Make sure this calls the onChange function of the parent to make it change.

var { Alpha } = require('react-color/lib/components/common');

<Alpha
  {...this.props}
  pointer={ CustomPointer }
  onChange={ this.handleChange } />

<EditableInput />

Use EditableInput to display an input / label that acts as the single source of truth until the input is blurred.

• label - Used to put a label on the input.
• value - The value to be passed down to the input.
• onChange - Function callback. Use this to call the onChange function of the parent. Returns an object where the key is the label and the value is the new value.
• style - Inline css to style the children elements: { wrap: {}, input: {}, label: {} }

var { EditableInput } = require('react-color/lib/components/common');

var inputStyles = {
  input: {
    border: none,
  },
  label: {
    fontSize: '12px',
    color: '#999',
  },
};

<EditableInput
  style={ inputStyles }
  label="hex"
  value={ this.props.hex }
  onChange={ this.handleChange } />

<Hue />

Use Hue to display a slider to toggle the hue value. Make sure to wrap it in a div that's the size you want the slider to be and that it is position: relative.

• ...this.props - Pass down all the color props from your top-most component.
• pointer - Define a custom pointer component for the slider pointer.
• onChange - Function callback. Make sure this calls the onChange function of the parent to make it change.
• direction - Display direction of the slider. Horizontal by default.

var { Hue } = require('react-color/lib/components/common');

<Hue
  {...this.props}
  pointer={ CustomPointer }
  onChange={ this.handleChange }
  direction={ 'horizontal' || 'vertical' } />

<Saturation />

Use Saturation to display a saturation block that users can drag to change the value. Make sure to wrap it in a div that's the size you want the block to be and that it is position: relative.

• ...this.props - Pass down all the color props from your top-most component.
• pointer - Define a custom pointer component for the slider pointer.
• onChange - Function callback. Make sure this calls the onChange function of the parent to make it change.

var { Saturation } = require('react-color/lib/components/common');

<Saturation
  {...this.props}
  pointer={ CustomPointer }
  onChange={ this.handleChange }  />

<Checkboard />

The Checkboard component renders a background of black / white checkerboard for use when displaying gradients or alpha. Make sure to wrap it in a div that's the size you want the block to be and that it is position: relative.

• size - Number, Size of squares. Default 8
• white - String, Color of white squares. Default transparent
• grey - String, Color of grey squares. Default rgba(0,0,0,.08)

var { Checkboard } = require('react-color/lib/components/common');

<Checkboard
  size={ 12 }
  white="#fff"
  grey="#333"  />