react-color/docs/documentation/04.01-parent.md

A Collection of Color Pickers from Sketch, Photoshop, Chrome & more

---
id: create-parent
title: Parent Component
---
To make a custom color picker, create a top-level component that will act as the bridge with the ColorPicker component. Pass that component down on the custom property:

```
var React = require('react');
var ColorPicker = require('react-color');
var CustomColorPicker = require('./CustomColorPicker');

class Component extends React.Component {
  render() {
    return <ColorPicker custom={ CustomColorPicker } />;
  }
}
```

This component will be passed `hex`, `rgb` and `hsl` values as props for the current color. It is also provided an `onChange` prop that should be called to propagate a new color. Pass it a hex string, or an rgb or hsl object.