Color picker for react
npm install react-color-gradient-picker* Installation
* Examples
* Demos
To install, you can use npm or yarn:
$ npm install react-color-gradient-picker
$ yarn add react-color-gradient-picker
Here is a simple examples of react-color-gradient-picker being used in an app:
jsx
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { ColorPicker } from 'react-color-gradient-picker';
import 'react-color-gradient-picker/dist/index.css';const color = {
red: 255,
green: 0,
blue: 0,
alpha: 1,
};
function App() {
const [colorAttrs, setColorAttrs] = useState(color);
const onChange = (colorAttrs) => {
setColorAttrs(colorAttrs);
};
return (
onChange={onChange}
onEndChange={onChange}
color={colorAttrs}
/>
);
}
ReactDOM.render(
`$3
jsx
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { ColorPicker } from 'react-color-gradient-picker';
import 'react-color-gradient-picker/dist/index.css';const gradient = {
points: [
{
left: 0,
red: 0,
green: 0,
blue: 0,
alpha: 1,
},
{
left: 100,
red: 255,
green: 0,
blue: 0,
alpha: 1,
},
],
degree: 0,
type: 'linear',
};
function App() {
const [gradientAttrs, setGradientAttrs] = useState(gradient);
const onChange = (gradientAttrs) => {
setGradientAttrs(gradientAttrs);
};
return (
onChange={onChange}
onEndChange={onChange}
gradient={gradientAttrs}
isGradient
/>
);
}
ReactDOM.render(
``