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

Accepted props

|> Palette Color

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

export default App;

Accepted props

• This component accepts all of `` 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 (
        
    );
};

Accepted props