React linear gradient picker
npm install react-linear-gradient-pickerThis 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
`js
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 }) => (
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 (
width: 320,
paletteHeight: 32,
palette,
onPaletteChange: setPalette,
}}
>
);
};
`
| 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 |colorPickerMode
| | String | static \| popover | No | Determines the mode of the color picker picker component, by default static will always present otherwise will act as popover which will appear upon interaction. |direction
| | horizontal\|vertical | horizontal | No | Determines the direction of the gradient picker. |
|> 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.
`js
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 (
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 (
open,
setOpen,
angle,
setAngle,
width: 220,
maxStops: 3,
paletteHeight: 32,
palette,
onPaletteChange: setPalette,
}}
>
);
};
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 pros.
`js
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
};
`
| 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 |