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