Small color picker component for React written in TypeScript.
npm install react-pick-color
# or
yarn add react-pick-color
import React, { useState } from "react";
import ColorPicker from "react-pick-color";
const App = () => {
const [color, setColor] = useState("#fff");
return (
<ColorPicker color={color} onChange={(color) => setColor(color.hex)} />
);
};
color
string | { r: number, g: number, b: number, a: number } | { h: number, s: number, l: number, a: number }
| optional
The initial color as a hex string or rgba/hsla object.
onChange
(color: { hex: string, rgb: object, hsl: object, alpha: number }) => void
|聽optional
onChange callback with the current color object.
presets
array
| optional
combinations
"analogous" | "monochromatic" | "splitcomplement" | "triad" | "tetrad" | "complement"
| optional
Provide combinations
as a string or an array of combinations
.
hideAlpha
boolean
| optional |聽default: false
Hide the alpha range handler.
hideInputs
boolean
| optional |聽default: false
Hide color inputs
theme
{ background: string, inputBackground: string, color: string, borderColor: string, borderRadius: string, boxShadow: string, width: string }
| optional | default: themes.light
You can add a custom theme for styling the colorpicker component or choose one from the predefined themes.
Custom Theme
import ColorPicker from "react-pick-color";
const ThemedColorPicker = () => {
return (
<ColorPicker
color="#3573CB"
theme={{
background: "lightgrey",
inputBackground: "grey",
borderColor: "darkgrey",
borderRadius: "8px",
color: "black",
width: "320px"
}}
/>
);
};
Predefined Theme
react-pick-color
exports a dark
and a light
theme.
import ColorPicker, { themes } from "react-pick-color";
const ThemedColorPicker = () => {
return <ColorPicker color="#3573CB" theme={themes.dark} />;
};
import { useColor } from "react-pick-color";
// A color as a hex string or rgba/hsla object. Will return a color object.
const { hex, rgb, hsl, hsv, alpha } = useColor("#fff");
- Size optimization
- Build little demo site and codesandboxes
- Write more tests
- Remove tinycolor dependency
- Add build pipeline
- Different CSS solution