react-color-palette

The useColor hook accepts an initial color value of type TColor. Supported formats include:

• <named-color> (e.g., "cyan")
• <hex-color> (e.g., "#123123")
• sRGB color space using hsl(), hwb(), or rgb() functions (e.g., "rgb(86 30 203)" or "hsl(120 100% 50% / .5)").

If the standard <ColorPicker /> component does not meet your design needs, you can compose your own layout using the individual sub-components: <Saturation />, <Hue />, and <Alpha />. These components are exported separately and can be placed in any order or container.

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>
  );
}

You can install the package using either npm or yarn.

yarn add react-color-palette
# or
npm install react-color-palette

To use the color picker, import ColorPicker and the useColor hook. You must also import the library's CSS file for styles to apply. The useColor hook manages the color state, providing the current color and a setter function.

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} />;
}

These sub-components can be used individually for custom layouts.

Common Props for all three:

• color (IColor): The current color.
• disabled (boolean): Disables interactivity. Defaults to false.
• onChange (Function): Callback fired when the color changes.
• onChangeComplete (Function): Callback fired when the interaction is complete.

Specific Props:

• <Saturation />: height (number) - Height of the saturation element in pixels.

The <ColorPicker /> component is the main entry point. It includes <Saturation />, <Hue />, <Alpha />, and input fields.

Props:

• color (IColor): The current color.
• onChange (Function): Callback fired when the color changes.
• onChangeComplete (Function): Callback fired when the user interaction with the picker is finished.
• hideInput ((keyof IColor)[] | boolean): If true, hides all inputs. If an array, hides only the specified input keys (e.g., ['rgb', 'hsv']).
• hideAlpha (boolean): Hides the <Alpha /> component. Defaults to false.
• disabled (boolean): Disables all interactivity. Defaults to false.
• height (number): Height of the <Saturation /> component in pixels. Defaults to 200.

The IColor interface represents the color object used throughout the library.

IColor structure:

• hex (string)
• rgb (IColorRgb)
• hsv (IColorHsv)

IColorRgb:

• r (number)
• g (number)
• b (number)
• a (number)

IColorHsv:

• h (number)
• s (number)
• v (number)
• a (number)

interface IColor {
  hex: string;
  rgb: IColorRgb;
  hsv: IColorHsv;
}

interface IColorRgb {
  r: number;
  g: number;
  b: number;
  a: number;
}

interface IColorHsv {
  h: number;
  s: number;
  v: number;
  a: number;
}

The react-color-palette package provides an interactive color picker component. While this entrypoint re-exports the contents of ./interactive.component, the primary way to use the library is by importing the ColorPicker component. This component allows users to select colors via a visual interface and provides callbacks for color changes.

import { ColorPicker } from 'react-color-palette';
import 'react-color-palette/css';

// Usage example:
// <ColorPicker color={color} onChange={setColor} />

The Saturation component is part of the react-color-palette library and is used to provide a saturation/lightness selection interface. It is exported from the saturation component entrypoint. To use it, import it from the package's saturation module.

import { Saturation } from 'react-color-palette';

// Usage within a color picker context
<Saturation 
  color={color} 
  onChange={onChange} 
/>