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 |