This package takes any color picker for you choice, And wraps it as a gradient picker. This plays well with the package angle picker, which allows your users to play with the gradient angle.
- This package is using hooks, which means you need to use React 16.8 or higher.
npm i react-linear-gradient-picker
import React, { useState } from 'react';
import { Panel as ColorPicker } from 'rc-color-picker';
import { GradientPicker } from 'react-linear-gradient-picker';
import 'react-linear-gradient-picker/dist/index.css';
const WrappedColorPicker = ({ onSelect, ...rest }) => (
<ColorPicker {...rest} onChange={c => {
onSelect(c.color, c.alpha / 100);
}}/>
);
const App = () => {
const [palette, setPalette] = useState([
{ offset: '0.00', color: 'rgb(238, 241, 11)' },
{ offset: '0.49', color: 'rgb(215, 128, 37)' },
{ offset: '1.00', color: 'rgb(126, 32, 207)' }
]);
return (
<GradientPicker {...{
width: 320,
paletteHeight: 32,
palette,
onPaletteChange: setPalette
}}>
<WrappedColorPicker/>
</GradientPicker>
);
};| Name | Type | Default Value | Required? | Description |
|---|---|---|---|---|
palette |
PaletteColor[] |
undefined |
Yes | The gradient pickers color palette, Each palette color struct is described below |
onPaletteChange |
Function |
undefined |
Yes | The function to trigger upon palette change (Can be either from stop drag or color select). |
paletteHeight |
Number |
32 |
No | The stops palette display area height |
width |
Number |
400 |
No | Determines the width of the gradient picker |
stopRemovalDrop |
Number |
50 |
No | Sets the Y stop drop removal offset, If the user will drag the color stop further than specified, Color will be removed |
maxStops |
Number |
5 |
No | The max gradient picker palette length can have |
minStops |
Number |
2 |
No | The min gradient picker palette length can have |
|> Palette Color
| Name | Type | Default Value | Required? | Description |
|---|---|---|---|---|
color |
String |
`` | Yes | The stop color, can be either hex of rgb format. |
offset |
Number |
`` | Yes |
The stop color offset in percent. |
opacity |
Number |
1 |
No |
The stop color opacity. |
active |
Boolean |
`` | No |
Rather the current color is active (selected) or not. |
import React, { useState } from 'react';
import { SketchPicker } from 'react-color';
import { GradientPickerPopover } from 'react-linear-gradient-picker';
import 'react-linear-gradient-picker/dist/index.css';
const rgbToRgba = (rgb, a = 1) => rgb
.replace('rgb(', 'rgba(')
.replace(')', `, ${a})`)
const WrapperPropTypes = {
onSelect: PropTypes.func
};
const WrappedSketchPicker = ({ onSelect, ...rest }) => {
return (
<SketchPicker {...rest}
color={rgbToRgba(rest.color, rest.opacity)}
onChange={c => {
const { r, g, b, a } = c.rgb;
onSelect(`rgb(${r}, ${g}, ${b})`, a);
}}/>
);
}
const initialPallet = [
{ offset: '0.00', color: 'rgb(238, 241, 11)' },
{ offset: '1.00', color: 'rgb(126, 32, 207)' }
];
const App = () => {
const [open, setOpen] = useState(false);
const [angle, setAngle] = useState(90);
const [palette, setPalette] = useState(initialPallet);
return (
<GradientPickerPopover {...{
open,
setOpen,
angle,
setAngle,
width: 220,
maxStops: 3,
paletteHeight: 32,
palette,
onPaletteChange: setPalette
}}>
<WrappedSketchPicker/>
</GradientPickerPopover>
);
};
export default App;| Name | Type | Default Value | Required? | Description |
|---|---|---|---|---|
trigger |
React Component |
defaultTrigger |
No | The popover trigger component, Will use default implementation if empty. |
open |
Boolean |
false |
Yes | Controls the popover open state |
setOpen |
Function |
undefined |
Yes | The setOpen method to be called upon open changes |
showGradientTypePicker |
Boolean |
true |
No | Rather to show the gradientType picker control. |
showAnglePicker |
Boolean |
true |
No | Rather to show the anglePicker picker control. |
angle |
Number |
undefined |
No | The angle picker angle value |
setAngle |
Function |
undefined |
No | Then angle picker setAngle method to be called upon angle changes |
- This component accepts all of
<GradientPicker/>pros.
import React, { useState } from 'react';
import { AnglePicker } from 'react-linear-gradient-picker';
import 'react-linear-gradient-picker/dist/index.css';
const App = () => {
const [angle, setAngle] = useState(25);
return (
<AnglePicker angle={angle} setAngle={setAngle}/>
);
};| Name | Type | Default Value | Required? | Description |
|---|---|---|---|---|
angle |
Number |
undefined |
Yes | The controlled angle. |
setAngle |
Function |
undefined |
Yes | The set angle method to be trigger after an angle was changes. |
size |
Number |
48 |
No | Determines the size of the angle picker |
snap |
Number |
5 |
No | Determines the angle change snapping, Can be removed with setting as 0 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent