Color Picker Color picker lets users select a color from a predefined palette, specify a color via its hexadecimal value, sample a color, and explore color values to create a custom color variation.
install yarn add @clayui/color-picker version use import ColorPicker from '@clayui/color-picker';
Example
import { Provider } from '@clayui/core' ;
import ColorPicker from '@clayui/color-picker' ;
import React , { useState } from 'react' ;
import '@clayui/css/lib/css/atlas.css' ;
export default function App ( ) {
const [ customColors , setCustoms ] = useState ( [ '008000' , '00FFFF' , '0000FF' ] ) ;
const [ color , setColor ] = useState ( customColors [ 0 ] ) ;
return (
< Provider spritemap ="/public/icons.svg" >
< div className ="p-4" >
< ColorPicker
colors ={ customColors }
label ="Custom Colors"
name ="colorPicker2"
onChange ={ setColor }
onColorsChange ={ setCustoms }
showHex ={ true }
title ="Custom Colors"
value ={ color }
/>
</ div >
</ Provider >
) ;
}
Types
Color Picker is delivered in 4 different ways: default colors, custom colors, native and small.
Default colors
: a predefined list of colors to the dropdown that is not allowed to change or manipulate.
Custom colors
: using the
colorsonColorsChange
Native
: use the
useNative
Small
: use the
small
We recommend that you review the use cases in the Storybook .
API Reference import ColorPicker from ' @clayui/color-picker ' ;
ColorPicker typeof ColorPicker Parameters Properties active boolean | undefined
Property to define whether the DropDown menu is expanded or not
(controlled).
ariaLabels Partial<{ selectColor: string; selectionIs: string; }> | undefined= {"selectColor":"Select a color","selectionIs":"Color selection is {0}"}
Labels for the aria attributes
colors Array < string > | undefined
List of color hex values
defaultActive boolean | undefined
Property to set the default value of active (uncontrolled).
defaultValue string | undefined = "FFFFFF"
Property to set the default value (uncontrolled).
disabled boolean | undefined
Flag for adding ColorPicker in disabled state
dropDownContainerProps any
Props to add to the DropDown container.
The label describing the collection of colors in the menu
messages Partial<{ close: string; customColor: string; }> | undefined
Messages for the Color Picker.
The input attribute for name
onActiveChange InternalDispatch < boolean > | undefined
Callback function for when active state changes (controlled).
onChange InternalDispatch < string > | undefined
Callback that is called when the value changes (controlled).
onColorsChange ((val: Array<string>) => void) | undefined
Callback for when the list of colors change
Deprecated onValueChange ((val: string) => void) | undefined
Callback for when the selected color changes
predefinedColors Array < string > | undefined
List of predefined colors.
showHex boolean | undefined = true
Determines if the hex input should render
showPalette boolean | undefined = true
Flag for showing and disabling the palette of colors.
This defaults to true
showPredefinedColorsWithCustom boolean | undefined
Flag to display predefined colors together with custom colors.
small boolean | undefined
Flag to indicate if input-group-sm class should
be applied to ClayInput.Group
splotchTitle string | undefined
The title of the Main Splotch component
spritemap string | undefined
Path to the location of the spritemap resource.
Title to describe the color picker form element
useNative boolean | undefined
Determines if the native color picker should be used
The value property sets the current value (controlled).
Returns any
default ({ active, colors, defaultActive, defaultValue, externalOnBlur, onActiveChange, onChange, onColorsChange, onValueChange, showPalette, useNative, value, }: { active?: boolean; colors?: Array<string>; defaultActive?: boolean; defaultValue?: string; externalOnBlur?: React.FocusEventHandler<HTMLInputElement>; onActiveChange?: (active: boolean) => void; onChange?: (val: string) => void; onColorsChange?: (val: Array<string>) => void; onValueChange?: (val: string) => void; showPalette?: boolean; useNative?: boolean; value?: string; }) => { color: any; customColors: Array<any>; customEditorActive: any; dispatch: any; internalActive: boolean; internalToHex: (color: any) => any; internalValue: string; onChangeEditor: (color: Instance, active: boolean) => void; onColorChangeEditor: (color: Instance) => void; onHexBlur: (event: React.FocusEvent<HTMLInputElement>) => void; onHexChange: (event: React.ChangeEvent<HTMLInputElement>) => void; onSplotchClick: () => void; setCustomEditorActive: any; setInternalActive: InternalDispatch<boolean>; setValue: InternalDispatch<string>; state: any; valueInputRef: any; }Parameters * { active?: boolean; colors?: Array<string>; defaultActive?: boolean; defaultValue?: string; externalOnBlur?: React.FocusEventHandler<HTMLInputElement>; onActiveChange?: (active: boolean) => void; onChange?: (val: string) => void; onColorsChange?: (val: Array<string>) => void; onValueChange?: (val: string) => void; showPalette?: boolean; useNative?: boolean; value?: string; }= { "defaultActive" : false , "defaultValue" : "FFFFFF" , "showPalette" : false , "useNative" : false }
active boolean | undefined
colors Array < string > | undefined
defaultActive boolean | undefined
defaultValue string | undefined = "FFFFFF"
onActiveChange ((active: boolean) => void) | undefined
onChange ((val: string) => void) | undefined
onColorsChange ((val: Array<string>) => void) | undefined
onValueChange ((val: string) => void) | undefined
showPalette boolean | undefined
useNative boolean | undefined
Returns { color: any; customColors: any[]; customEditorActive: any; dispatch: any; internalActive: boolean; internalToHex: (color: any) => any; internalValue: string; onChangeEditor: (color: Instance, active: boolean) => void; ... 8 more ...; valueInputRef: any; }
colorToXY (color: tinycolor.Instance, node: HTMLElement) => { x: number; y: number; }Utility function for getting x & y coordinates for gradient
Parameters color * tinycolor.Instance
Returns { x: number; y: number; }
hueToX (hue: number, node: HTMLElement) => numberUtility function for getting the x position from hue
xToHue (x: number, node: HTMLElement) => numberUtility function for getting hue from the x position
xToSaturation (x: number, node: HTMLElement) => numberUtility function for getting saturation from the x position
yToVisibility (y: number, node: HTMLElement) => numberUtility function for getting visibility from the y position
findColorIndex (colors: Array<string>, color: tinycolor.Instance) => numberParameters color * tinycolor.Instance
Returns number
internalToHex ( color : ColorInstance ) => any ( color : ColorInstance ) => boolean
getCSSVariableColor ( value : string ) => any
parseColor ( value : string ) => any
toHexColorString ({ isHex, value, }: { isHex: boolean; value?: string; }) => stringParameters * { isHex : boolean; value ?: string; } = { "value" : "" }
Returns stringPartial < { selectColor : string; selectionIs : string; } > | undefined
{ "selectColor" : "Select a color" , "selectionIs" : "Color selection is {0}" }
Partial < { close : string; customColor : string; } > | undefined
(( val : Array < string >) => void ) | undefined
(( val : string ) => void ) | undefined
({ active , colors , defaultActive , defaultValue , externalOnBlur , onActiveChange , onChange , onColorsChange , onValueChange , showPalette , useNative , value , } : { active ?: boolean ; colors ?: Array < string >; defaultActive ?: boolean ; defaultValue ?: string ; externalOnBlur ?: React . FocusEventHandler < HTMLInputElement >; onActiveChange ?: ( active : boolean ) => void ; onChange ?: ( val : string ) => void ; onColorsChange ?: ( val : Array < string >) => void ; onValueChange ?: ( val : string ) => void ; showPalette ?: boolean ; useNative ?: boolean ; value ?: string ; }) => { color : any; customColors : Array < any > ; customEditorActive : any; dispatch : any; internalActive : boolean; internalToHex : ( color : any ) => any; internalValue : string; onChangeEditor : ( color : Instance , active : boolean ) => void ; onColorChangeEditor : ( color : Instance ) => void ; onHexBlur : ( event : React . FocusEvent < HTMLInputElement >) => void ; onHexChange : ( event : React . ChangeEvent < HTMLInputElement >) => void ; onSplotchClick : () => void ; setCustomEditorActive : any; setInternalActive : InternalDispatch < boolean > ; setValue : InternalDispatch < string > ; state : any; valueInputRef : any; }
{ active ?: boolean; colors ?: Array < string > ; defaultActive ?: boolean; defaultValue ?: string; externalOnBlur ?: React.FocusEventHandler < HTMLInputElement > ; onActiveChange ?: ( active : boolean ) => void ; onChange ?: ( val : string ) => void ; onColorsChange ?: ( val : Array < string >) => void ; onValueChange ?: ( val : string ) => void ; showPalette ?: boolean; useNative ?: boolean; value ?: string; }
(( active : boolean ) => void ) | undefined
(( val : string ) => void ) | undefined
(( val : Array < string >) => void ) | undefined
(( val : string ) => void ) | undefined
( color : tinycolor . Instance , node : HTMLElement ) => { x : number; y : number; }
( hue : number , node : HTMLElement ) => number
( x : number , node : HTMLElement ) => number
( x : number , node : HTMLElement ) => number
( y : number , node : HTMLElement ) => number
( colors : Array < string >, color : tinycolor . Instance ) => number
({ isHex , value , } : { isHex : boolean ; value ?: string ; }) => string
