/react-color-palette

🎨 Lightweight Color Picker component for React.

Primary LanguageTypeScriptMIT LicenseMIT

react-color-palette
npm downloads size

🎨 Lightweight <ColorPicker /> component for React.

Live Demo →

Features

  • 🚀 Lightweight.
  • 💨 No dependencies.
  • 🛡️ Strict.

Installation

npm

npm install react-color-palette

yarn

yarn add react-color-palette

Usage

import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/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 />;
};

Benchmarks

Library Minified Gzipped Dependencies Tree Shaking Type Declarations
react-color-palette
react-colorful
react-input-color
rc-color-picker
react-color

Overriding styles

If the default colors don't fit your project, you can always change them.

Example for the Light theme 
.rcp-light {
  --rcp-background: #ffffff;
  --rcp-input-text: #111111;
  --rcp-input-border: rgba(0, 0, 0, 0.1);
  --rcp-input-label: #717171;
}
Example for the Dark theme 
.rcp-dark {
  --rcp-background: #181818;
  --rcp-input-text: #f3f3f3;
  --rcp-input-border: rgba(255, 255, 255, 0.1);
  --rcp-input-label: #999999;
}

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.