# 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

<img width="200" alt="gradient_preview" src="/assets/gp.png"> <br/>

```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 }) => (
  <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

<img width="200" alt="gradient_popover_preview" src="/assets/gpp.jpg"> <br/>

```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 (
    <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

<img width="200" alt="gradient_preview" src="/assets/ap.png"> <br/>

```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 <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 |