Package Exports

react-linear-gradient-picker
react-linear-gradient-picker/dist/index.css
react-linear-gradient-picker/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-linear-gradient-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

gradient_preview

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_popover_preview

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

gradient_preview

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