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
export default () => {
5
const logColor = (color: ColorResult) => console.log(color);
6
return <ColorPicker id="color-picker-id" defaultColor="#F37231" onChangeComplete={logColor} />;
7
};

Props

NameTypeDefaultDescription
idrequiredstring
Id of the element
classNamestring
colorColor
defaultColorstring
Hex value of the color
disableAlphaboolean
keyKey
onChangeColorChangeHandler
onChangeCompleteColorChangeHandler
refLegacyRef<ChromePicker>
stylesany

Examples

Hidden Controls
1
import {ColorPicker} from '@coveord/plasma-react';
2
3
export default () => <ColorPicker id="color-picker-id-2" styles={{default: {controls: {display: 'none'}}}} />;
Selector
Selected value:
1
import {useSelector} from 'react-redux';
2
import {ColorPicker, PlasmaState, InputSelectors} from '@coveord/plasma-react';
3
4
export default () => {
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
};

No guidelines exist for ColorPicker yet.

Create guidelines