react-color-picker-tool

color picker in react, write typescript, and support color dropper to get any color in webpage, use native api in Chrome, use canvas api in other browser

``bash
npm i react-color-picker-tool
`

Try it online

!react-color-picker

In Chrome

!Chrome

In Firefox or Safari etc

!Firefox

Quick Start

`javascript
import { useState } from "react";
import { ReactColorPicker } from 'react-color-picker-tool';

function App() {
const [color, setColor] = useState({ r: 123, g: 123, b: 123, a: 0.5 });

return setColor(colors.rgba)}>
}
`

API

| | type | default | description |
|-------------|--------------------------|-----------|------------------------------|
| color | colorParams | "#ffffff" | Input color |
| width | number/string | "#ffffff" | width of the color picker panel |
| onChange | (color:ColorSet) => void | | Color change callback |
| hideEyeDrop | boolean | false | Whether hidden eye dropper |
| hidePresets | boolean | false | Whether hidden preset colors |
| presetColors | Array | [] | colors for preset |

$3

use tinycolor2 to handle the color input

#### Hex, 8-digit (RGBA) Hex
`javascript
setColor(colors.rgba)}>
`

#### RGB, RGBA
`javascript
setColor(colors.rgba)}>

setColor(colors.rgba)}>

setColor(colors.rgba)}>

setColor(colors.rgba)}>
`

#### HSV, HSVA
`javascript
setColor(colors.rgba)}>

setColor(colors.rgba)}>

setColor(colors.rgba)}>

setColor(colors.rgba)}>
`

#### HSV, HSVA
`javascript
setColor(colors.rgba)}>

setColor(colors.rgba)}>

setColor(colors.rgba)}>

setColor(colors.rgba)}>
`

$3


color results from callback
`javascript
export declare type HSV = {
h: number;
s: number;
v: number;
};
export declare type HSVA = {
h: number;
s: number;
v: number;
a: number;
};
export declare type HSL = {
h: number;
s: number;
l: number;
};
export declare type HSLA = {
h: number;
s: number;
l: number;
a: number;
};
export declare type vector2 = {
x: number;
y: number;
};
export declare type RGBA = {
r: number;
g: number;
b: number;
a: number;
};
export declare type RGB = {
r: number;
g: number;
b: number;
};
export declare type HEX = string;
export declare enum colorEnum {
HEX = "hex",
RGBA = "rgba",
HSV = "hsv",
HSL = "hsl"
}
export interface ColorSet {
[colorEnum.HSV]: HSVA;
[colorEnum.HSL]: HSLA;
[colorEnum.HEX]: HEX;
[colorEnum.RGBA]: RGBA;
}
``