JSPM

react-colors-pickers

1.0.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2
  • Score
    100M100P100Q25491F
  • License MIT

Color Picker.

Package Exports

  • react-colors-pickers
  • react-colors-pickers/lib/css/styles.css

Readme

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.