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
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 | - |