Examples

• As a hook

const Component = (props) => {
  const [colors, gradient] = useGradient({options})
  ...
  return (
    { gradient }
  )
}

• As a Component

const Component = (props) => {
  ...
  return (
    <Gradient {...options} />
  )
}

Props

| Name | Type | Default Value | Required? | Description |-|-|-|-|- defaultColors | TRGB[] | see here | No | Array of default colors for the gradient onChange | (colors: TRGB[]) => void | undefined | No | Function triggered when the gradient changes (different colors, a cursor is moved, ...) gradientOptions | GradientOptions | see here | No | Options to change the way the gradient is displayed cursorOptions | CursorOptions | see here | No | Options to control the behavior of the cursors (i.e. colors on the gradient) pickerOptions | PickerOptions | see here | No | Options to control the color pickers under the gradient

Types

TRGB

| Name | Type | Required? | Description |-|-|-|- | r | number | Yes | Red value | g | number | Yes | Green value | b | number | Yes | Blue value | t | number | Yes | Position on the gradient (from 0 to 1 included)

GradientOptions

| Name | Type | Default Value | Required? | Description |-|-|-|-|- | height | number | 45 | Yes | Gradient's height in pixels

CursorOptions

| Name | Type | Default Value | Required? | Description |-|-|-|-|- | width | number | 15 | No | - | border | number | 4 | No | - | shadow | number | 2 | No | - | scale | number | 1 | No | - | grid | boolean | false | No | - | samples | number | 20 | No | Number of steps the cursors can take. Only works if grid is set to true

PickerOptions

| Name | Type | Default Value | Required? | Description |-|-|-|-|- | showHue | boolean | true | No | - | showChrome | boolean | true | No | - | showCircles | boolean | true | No | -