ColorPicker Edit

ColorPicker is a color picking component based on react-colorful. It lets you pick a color visually or by manipulating the individual RGB(A), HSL(A) and Hex(8) color values.

Usage Usage

import { ColorPicker } from '@wordpress/components/ui';

function Example() {
    const [color, setColor] = useState();
    return (
        <ColorPicker
            color={color}
            onChange={setColor}
            enableAlpha
            defaultValue="#000"
        />
    );
}

Top ↑

Props Props

Top ↑

color: string color: string

The current color value to display in the picker. Must be a hex or hex8 string.

  • Required: No

Top ↑

onChange: (hex8Color: string) => void onChange: (hex8Color: string) => void

Fired when the color changes. Always passes a hex8 color string.

  • Required: No

Top ↑

enableAlpha: boolean enableAlpha: boolean

Defaults to false. When true the color picker will display the alpha channel both in the bottom inputs as well as in the color picker itself.

  • Required: No
  • Default: false

Top ↑

defaultValue: string | undefined defaultValue: string | undefined

An optional default value to use for the color picker.

  • Required: No
  • Default: '#fff'

Top ↑

copyFormat: 'hex' | 'hsl' | 'rgb' | undefined copyFormat: 'hex' | 'hsl' | 'rgb' | undefined

The format to copy when clicking the displayed color format.

  • Required: No