Module: Swatch

Renders a swatch component with id wrapper, allows users to select from a palette of swatches, or add their own using a color picker.

Parameters:

Name Type Description

props

object

Component props.

Properties

Name	Type	Description
`allowNew`	boolean	Whether to display an icon to add new swatches to the palette.
`colorPickerAttributes`	object	Custom attributes for the color picker.
`colorPickerClasses`	string \| Array \| object	Custom classes for the color picker.
`controlled`	boolean	Whether the component is controlled or not.
`customAttributes`	object	Custom attributes for the component.
`customClasses`	string \| Array \| object	Custom classes for the component.
`i18n`	object	Translated strings for the UI.
`iconPrefix`	string	The prefix for which icon kit to use.
`id`	string	The ID for the component.
`name`	string	The name of the component.
`onChange`	function	Callback function when the swatch value changes.
`palette`	Array	An array of hex color values to display as default palette options.
`paletteCustom`	Array	An array of hex color values to display as custom/editable palette options.
`spacing`	string \| number \| Array \| object	The spacing for the component, as a string, number, array, or object.
`value`	string	The initial hex value to select.

ref

object | null

Ref to the component.

Since: 1.1.15
Source: modules/Swatch/index.js, line 422

Returns:

The Swatch component.

Type:: JSX.Element

Example

import Swatch from '@gravityforms/components/react/admin/modules/Swatch';

return (
    <Swatch customClasses={ [ 'example-class' ] } palette={ [ '#000', '#111' ] } />
);