react-linear-gradient-picker

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.

Installation

npm i react-linear-gradient-picker

Gradient Picker Usage

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>
  );
};

Accepted props

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.

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;

Accepted props

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.

Angle Picker Usage

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} />;
};

Accepted props

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