JSPM

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

Color palette for React

Package Exports

  • react-color-palette

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-color-palette) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-color-palette

🎨 Lightweight <ColorPicker /> component for React.

npm downloads size

Installation

yarn

yarn add react-color-palette

npm

npm install react-color-palette

Usage

import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";

export function App() {
  const [color, setColor] = useColor("#561ecb");

  return <ColorPicker color={color} onChange={setColor} />;
}

Examples

Usage rgb() in useColor()

import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";

export function App() {
  const [color, setColor] = useColor("rgb(86 30 203)");

  return <ColorPicker color={color} onChange={setColor} />;
}

Usage <named-color> in useColor()

import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";

export function App() {
  const [color, setColor] = useColor("cyan");

  return <ColorPicker color={color} onChange={setColor} />;
}

Custom Layout

import { Saturation, Hue, useColor } from "react-color-palette";
import "react-color-palette/css";

export function App() {
  const [color, setColor] = useColor("hsl(120 100% 50% / .5)");

  return (
    <div className="custom-layout">
      <Saturation height={300} color={color} onChange={setColor} />
      <Hue color={color} onChange={setColor} />
    </div>
  );
}

HEX input only

import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";

export function App() {
  const [color, setColor] = useColor("#123123");

  return <ColorPicker hideInput={["rgb", "hsv"]} color={color} onChange={setColor} />
}

onChangeComplete optional callback

import { ColorPicker, useColor, type IColor } from "react-color-palette";
import "react-color-palette/css";

export function App() {
  const [color, setColor] = useColor("#123123");

  const onChangeComplete = (color: IColor) => localStorage.setItem("color", color.hex);

  return <ColorPicker hideInput={["rgb", "hsv"]} color={color} onChange={setColor} onChangeComplete={onChangeComplete} />
}

API

<ColorPicker />

The main component, which includes: <Saturation />, <Hue />, <Alpha /> and <Fields /> components for instant use.
If you need a custom layout, then you can use <Saturation />, <Hue /> and <Alpha /> components separately, which are also exported from the library.

Prop Type Default Description
height number 200 Height of the Saturation component in pixels.
hideAlpha boolean false Hides the Alpha component.
hideInput (keyof IColor)[] | boolean false If boolean: hides all inputs if true or displays all inputs if false. If array: hides all inputs listed in the array.
color IColor Current color.
disabled boolean false Disables interactivity.
onChange Function Сallback function will be fired when color changes.
onChangeComplete Function Callback function will be fired when the interaction is complete with the color picker.

<Saturation />

Prop Type Default Description
height number Height of the saturation element in pixels.
color IColor Current color.
disabled boolean false Disables interactivity.
onChange Function Сallback function will be fired when color changes.
onChangeComplete Function Callback function will be fired when the interaction is complete with the saturation picker.

<Hue />

Prop Type Default Description
color IColor Current color.
disabled boolean false Disables interactivity.
onChange Function Сallback function will be fired when color changes.
onChangeComplete Function Callback function will be fired when the interaction is complete with the hue picker.

<Alpha />

Prop Type Default Description
color IColor Current color.
disabled boolean false Disables interactivity.
onChange Function Сallback function will be fired when color changes.
onChangeComplete Function Callback function will be fired when the interaction is complete with the alpha picker.

useColor()

Arg Type Default Description
initialColor TColor Initial сolor.

TColor

Value can be specified using one of the methods listed below:

IColor

Field Type
hex string
rgb IColorRgb
hsv IColorHsv

IColorRgb

Field Type
r number
g number
b number
a number

IColorHsv

Field Type
h number
s number
v number
a number

License

Code released under the MIT license.