A colorpicker for React Sample in 2020

A colorpicker for React Sample in 2020

tutorials -


A colorpicker for React.


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'

export default class Example extends React.PureComponent {
  onChange = color => {

  render() {
    return (
      <ColorPicker onChange={this.onChange} />

Required properties


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

Optional properties


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.js.


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


Defaults to hsl. Initializes which color model tab is active.
Possible options: hsl, rgb.


Defaults to h. Initializes which color channel is active.
Possible options: h, s, l, r, g, b.


If reset is provided as a property with a value of true a reset button is
added that when pressed, reverts back to the original color when the
colorpicker is initialized on the page. Defaults 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.

instance = null;

setInstance = picker => {
  this.instance = picker;

override = () => {

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


Trending On Tutorial Stuff

Our Sponsors

Top Applications in Tutorial Stuff

Top Experts In Tutorial Stuff