react-gradient-hook

A react gradient hook for users to create custom gradients.

• Typescript support
• Both Hook and standalone Component available
• Highly customizable
• Lightweight: <100 kB
• Uses react-color for the color pickers

Live playground here 🎨

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	-