Demo

npm install @mapbox/react-colorpickr

You'll also want to include a copy of colorpickr.css in your code.

<link href='react-colorpickr.css' rel='stylesheet' />

import React from 'react'
import ColorPicker from '@mapbox/react-colorpickr'

function Example() {
  return (
    <ColorPicker onChange={console.log} />
  )
}

Value should be a function and is called whenever a color is updated from the colorpicker. Returns a color object.

By default, react-colorpickr depends on Assembly and the CSS located in dist/colorpickr.css. You can however, override it thanks to react-themeable which react-colorpickr uses internally. See the properties used and the class name values in theme.ts.

Accepts any valid css color. If this isn't provided, a default color is used.

Initializes what should be displaed in the bottom color input. Defaults to hex.

Initializes which view tab is active. Defaults to disc.

When true, an eyedropper is added to the top-right of the interface. Defaults to true.

When true, a reset button is added that when pressed, reverts to the initialized color. Defaults to true.

When true, a alpha range slider and input is provided. Defatuls to true.

To use internal methods from react-colorpickr, mounted provides access to the components instance. This is helpful for calling methods like overrideValue that can manually set a new color.

const [instance, setInstance] = useState(null);

const override = () => {
  instance.overrideValue('red');
};

render() {
  <>
    <ColorPickr mounted={picker => setInstance(picker)} onChange={console.log} />
    <button onClick={override}>Override</button>
  </>
}

Optional property to provide a different disc radius for selection. Helpful if you are re-themeing the interface. Defaults to 18.

If true the colorpicker will render in a readonly state with values clearly shown and selectable, but not editable. Defaults to false.

npm install & npm start

Then open http://localhost:9966 in browser.