A colorpicker for React
Install
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' />
Usage
import React from 'react'
import ColorPicker from '@mapbox/react-colorpickr'
function Example() {
return (
<ColorPicker onChange={console.log} />
)
}
Required properties
(color) => void
onChange Value should be a function and is called whenever a color is updated from the colorpicker. Returns a color object.
Optional properties
Object<[key: string]: string>
theme 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
.
string
initialValue Accepts any valid css color. If this isn't provided, a default color is used.
'hsl' | 'rgb' | 'hex'
colorSpace Initializes what should be displaed in the bottom color input. Defaults to hex
.
'disc' | 'values'
mode Initializes which view tab is active. Defaults to disc
.
boolean
eyedropper When true
, an eyedropper is added to the top-right of the interface. Defaults to true
.
boolean
reset When true
, a reset button is added that when pressed, reverts to the initialized color. Defaults to true
.
boolean
alpha When true
, a alpha range slider and input is provided. Defatuls to true
.
(ColorPickr) => void
mounted 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>
</>
}
number
discRadius Optional property to provide a different disc radius for selection. Helpful if you are re-themeing the interface. Defaults to 18
.
boolean
readOnly If true
the colorpicker will render in a readonly state with values clearly shown and selectable, but not editable. Defaults to false
.
Developing
npm install & npm start
Then open http://localhost:9966 in browser.