A color picker with HEX and RBG support.

Parameters:
NameTypeDescription
propsobject

Component props.

Properties
NameTypeDescription
controlledboolean

Whether the component is controlled or not.

customAttributesobject

Custom attributes for the component.

customClassesstring | Array | object

Custom classes for the component.

i18nobject

Translated strings for the UI.

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.

rgbIdPrefixstring

Custom prefix for the individual input IDs.

showCancelButtonboolean

Whether to show the cancel button or not.

spacingstring | number | Array | object

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

trapFocusboolean

Whether to trap focus or not.

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