React-gradient-hook NPM

npm Downloads GitHub last commit

Examples

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

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

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

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)

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

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`