Form

Color Picker

A color picker is a visual interface that allows users to select a color. Built using React Color
1
import {ColorPicker} from '@coveord/plasma-react';
2
import {ColorResult} from 'react-color';
3
4
const Demo = () => {
5
const logColor = (color: ColorResult) => console.log(color);
6
return <ColorPicker id="color-picker-id" defaultColor="#F37231" onChangeComplete={logColor} />;
7
};
8
export default Demo;

Props

NameTypeDefaultDescription
idrequiredstring
Id of the element
classNamestring
colorColor
defaultColorstring
Hex value of the color
disableAlphaboolean
keyKey
onChangeColorChangeHandler
onChangeCompleteColorChangeHandler
refLegacyRef<ChromePicker>
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
stylesany

Examples

Hidden Controls
1
import {ColorPicker} from '@coveord/plasma-react';
2
3
const Demo = () => <ColorPicker id="color-picker-id-2" styles={{default: {controls: {display: 'none'}}}} />;
4
export default Demo;
Selector
Selected value:
1
import {useSelector} from 'react-redux';
2
import {ColorPicker, PlasmaState, InputSelectors} from '@coveord/plasma-react';
3
4
const Demo = () => {
5
const selected = useSelector((state: PlasmaState) =>
6
InputSelectors.getValue(state, {
7
id: 'color-picker-id-3',
8
}),
9
);
10
return (
11
<>
12
<ColorPicker id="color-picker-id-3" />
13
Selected value: {selected}
14
</>
15
);
16
};
17
export default Demo;

No guidelines exist for ColorPicker yet.

Create guidelines