d2-ui/node_modules-react-15/react-color/docs/documentation/04.02-helpers.md

d2-ui

---
id: create-helpers
title: 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/src/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/src/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/src/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/src/components/common');

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