Code

Props

Props	Data Type	Required
className	string	❌
id	string	✅
name	string	❌
label	string	❌
info	string	❌
defaultColor	string (hexadecimal code)	❌
alpha	boolean	❌
helptext	string	❌
disabled	boolean	❌
onChange	function	❌
onCopy	function	❌

onChange Event Response

Property	Data Type
id	string
name	string
label	string
value	{ hex: string, hsla/hsl: { h: string, s: string, l: string, a: string }, rgba/rgb: { r: string, g: string, b: string, a: string } }

onCopy Event Response

onCopy action is going to copy to the user's clipboard the selected color in hexadecimal code at the same time it is going to return it as a string in the case the developer wants to use the value at the moment.

Example

import React, {useState} from 'react';
import {ColorPicker} from '@2600hz/sds-react-components';

const Example = ()=>{
    const [color, setColor] = useState('#000000');
    
    const updateState = (e)=>{
        setColor(e.value.hex);
    }
    
    const showColorInConsole = (e)=>{
        //The hexadecimal code is also copied to the user's clipboard
        console.log(e);
    }
    
    return(
        <div className='container'>
            <ColorPicker 
                id='example' 
                defaultColor={color} 
                alpha 
                onChange={updateState}
                onCopy={showColorInConsole}
            />
        </div>
    )
}

Components Dependency

For this component elaboration there were used the following internal components:

• Label

• Button

Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.

React

Form Controls / Color Picker - Base Color Picker ⋅ Storybooksipster-react-component-storybook.netlify.app