GradientPicker Edit

GradientPicker is a React component that renders a color gradient picker to define a multi step gradient. There’s either a linear or a radial type available.

gradient-picker

Usage Usage

Render a GradientPicker.

import { GradientPicker } from '@wordpress/components';
import { useState } from '@wordpress/element';

const myGradientPicker = () => {
    const [ gradient, setGradient ] = useState( null );

    return (
        <GradientPicker
            value={ gradient }
            onChange={ ( currentGradient ) => setGradient( currentGradient ) }
            gradients={ [
                {
                    name: 'JShine',
                    gradient:
                        'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
                    slug: 'jshine',
                },
                {
                    name: 'Moonlit Asteroid',
                    gradient:
                        'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
                    slug: 'moonlit-asteroid',
                },
                {
                    name: 'Rastafarie',
                    gradient:
                        'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
                    slug: 'rastafari',
                },
            ] }
        />
    );
};

Top ↑

Props Props

The component accepts the following props:

Top ↑

value value

The current value of the gradient. Pass a css gradient like linear-gradient(90deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%). Optionally pass in a null value to specify no gradient is currently selected.

  • Type: string
  • Required: No
  • Default: linear-gradient(90deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%)

Top ↑

onChange onChange

The function called when a new gradient has been defined. It is passed the currentGradient as an argument.

  • Type: Function
  • Required: Yes

Top ↑

gradients gradients

An array of objects of predefined gradients which show up as CircularOptionPicker above the gradient selector.

  • Type: array
  • Required: No

Top ↑

clearable clearable

Whether the palette should have a clearing button or not.

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

Top ↑

clearGradient clearGradient

Called when a new gradient has been defined. It is passed the currentGradient as an argument.

  • Type: Function
  • Required: No

Top ↑

disableCustomGradients disableCustomGradients

If true, the gradient picker will not be displayed and only defined gradients from gradients are available.

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