react-linear-gradient-picker
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.
What you need to know before installing?
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.
Gradient Picker Popover Usage
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