ColorPalette Edit

Props Props

The component accepts the following props.

{ colors, disableCustomColors = false, value, onChange, className, clearable = true }

colors colors

Array with the colors to be shown.

  • Type: Array
  • Required: Yes

Top ↑

disableCustomColors disableCustomColors

Whether to allow custom color or not.

  • Type: Boolean
  • Required: No
  • Default: false

Top ↑

value value

currently active value

  • Type: String
  • Required: No

Top ↑

onChange onChange

Callback called when a color is selected.

  • Type: Function
  • Required: Yes

Top ↑

className className

classes to be applied to the container.

  • Type: String
  • Required: No
  • Default: Select or Upload Media

Top ↑

clearable clearable

Whether the palette should have a clearing button or not.

  • Type: Boolean
  • Required: No
  • Default: true

Top ↑

Usage Usage

import { ColorPalette } from '@wordpress/components';
import { withState } from '@wordpress/compose';

const MyColorPalette = withState( {
    color: '#f00',
} )( ( { color, setState } ) => {
    const colors = [
        { name: 'red', color: '#f00' },
        { name: 'white', color: '#fff' },
        { name: 'blue', color: '#00f' },
    ];

    return (
        <ColorPalette
            colors={ colors }
            value={ color }
            onChange={ ( color ) => setState( { color } ) }
        />
    )
} );