Installation

npm

npm install color-picker-react

yarn

yarn add color-picker-react

Usage

import { ColorPicker, useColor } from "color-picker-react";
import "color-picker-react/lib/css/styles.css";

export const App = () => {
  const [color, setColor] = useColor("hex", "#121212");

  return <ColorPicker width={456} height={228} color={color} onChange={setColor} hideHSV dark />;
};

API

ColorPicker Props

| Name | Type | Default | Description | | ---------------- | ------------ | --------- | -------------------------------------------------------------------------------- | | width | number | | The width of the color picker. | | height | number | width | The height of the color picker. | | color | Color | | The current Color. | | onChange | Function | | A function to update Color. | | onChangeComplete | Function | undefined | A callback is called every time the user stops changing a color (mouseup event). | | hideHEX | bool | false | Hide HEX input. | | hideRGB | bool | false | Hide RGB input. | | hideHSV | bool | false | Hide HSV input. | | alpha | bool | false | Enable alpha channel. | | dark | bool | false | Color theme. |

useColor Arguments

| Name | Type | Default | Description | | ------------ | ------------------------------------ | ------- | ----------------------------------------------- | | model | "hex" | "rgb" | "hsv" | | The color model. | | initColor | string | ColorRGB | ColorHSV | | The initial color in the selected color model. |

toColor Arguments

| Name | Type | Default | Description | | ------ | ------------------------------------ | ------- | --------------------------------------- | | model | "hex" | "rgb" | "hsv" | | The color model. | | color | string | ColorRGB | ColorHSV | | The color in the selected color model. |

Color

| Field | Type | | ----- | ---------- | | hex | string | | rgb | ColorRGB | | hsv | ColorHSV |

ColorRGB

| Field | Type | | ----- | ----------------------- | | r | number | | g | number | | b | number | | a | number | undefined |

ColorHSV

| Field | Type | | ----- | ----------------------- | | h | number | | s | number | | v | number | | a | number | undefined |

License

Code released under the MIT license.