Form

Color Picker

A color picker is a visual interface that allows users to select a color. Built using React Color
View source
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