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
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 |
Name |
Type |
Default Value |
Required? |
Description |
showHue |
boolean |
true |
No |
- |
showChrome |
boolean |
true |
No |
- |
showCircles |
boolean |
true |
No |
- |