A color picker with HEX and RBG support.

Parameters:
NameTypeDescription
propsobject

Component props.

Properties
NameTypeDescription
customAttributesobject

Custom attributes for the component.

customClassesstring | Array | object

Custom classes for the component.

i18nobject

Translated strings for the UI.

rgbIdPrefixstring

Custom prefix for the individual input IDs.

onCancelfunction

Custom callback to fire when the picker is closed.

onChangefunction

Custom callback to fire when the picker is changed.

onSavefunction

Custom callback to fire when the picker is saved/applied.

spacingstring | number | Array | object

The spacing for the component, as a string, number, array, or object.

triggerRefobject

Ref object representing the trigger used to display this picker.

valuestring

The initial value to use when the picker is instantiated.

Since
  • 1.1.15
Source
Returns:

The ColorPicker component.

Type: 
object
Example
import ColorPicker from '@gravityforms/components/react/admin/modules/ColorPicker';

return ( <ColorPicker onSave={ () => { handleSave(); } } value="#000" /> );

Methods

(inner) handleClose() → {void}

Handle the hex color picker close event.

Since
  • 1.1.15
Source
Returns:
Type: 
void

(inner) handleOnChange(newValue) → {void}

Handler for the hex color picker change event.

Parameters:
NameTypeDescription
newValuestring

The new color value.

Since
  • 1.1.15
Source
Returns:
Type: 
void

(inner) renderRGBInput(colorPart, index) → {JSX.Element}

Render the RGB input field.

Parameters:
NameTypeDescription
colorPartstring

The color value.

indexnumber

The index of the color.

Since
  • 1.1.15
Source
Returns:
Type: 
JSX.Element