Skip to content
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
react-color-palette
npm downloads size

🎨 Lightweight <ColorPicker /> component for React.


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.
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.