react-colorful

react-colorful is a lightweight, high-performance color picker for React. It is designed for developers who prioritize bundle size and client-side performance.

Key characteristics:

• Zero dependencies: Reduces security risks and prevents unexpected bundle size increases.
• Modern architecture: Built exclusively with React hooks and functional components (no classes or polyfills required).
• Optimized algorithms: Uses manually optimized color conversion algorithms instead of heavy external color manipulation libraries.

react-colorful ships with built-in types. You can import specific types associated with the color models you are using to improve type safety in your own code.

Example for HSL:

import { HslColorPicker, HslColor } from "react-colorful";

const myHslValue: HslColor = { h: 0, s: 0, l: 0 };

To use react-colorful in your React or Preact application, install it using npm:

npm install react-colorful

If you are using Preact with TypeScript and encounter type issues (often caused by @types/react being present in your dependency tree), you can resolve this by adding a declaration to a declaration.d.ts file:

import React from "react";

declare global {
    namespace React {
        interface ReactElement {
            nodeName: any;
            attributes: any;
            children: any;
        }
    }
}

You can customize the appearance of the color picker by overriding its default CSS classes in your own stylesheet.

.your-component .react-colorful {
  height: 240px;
}
.your-component .react-colorful__saturation {
  border-radius: 4px 4px 0 0;
}
.your-component .react-colorful__hue {
  height: 40px;
  border-radius: 0 0 4px 4px;
}
.your-component .react-colorful__hue-pointer {
  width: 12px;
  height: inherit;
  border-radius: 0;
}

The onChangeEnd callback is triggered only when the user finishes changing a color (e.g., on mouseup, touchend, or keyup). This is ideal for operations like saving to a database or undo/redo functionality to avoid performance issues caused by running logic on every intermediate color change.

const YourComponent = () => {
  const [color, setColor] = useState("#aabbcc");
  return (
    <HexColorPicker
      color={color}
      onChange={setColor}
      onChangeEnd={(color) => saveToDatabase(color)}
    />
  );
};

You can use any of the provided color picker components by passing a color state and an onChange handler. Here is an example using the HexColorPicker:

import { HexColorPicker } from "react-colorful";

const YourComponent = () => {
  const [color, setColor] = useState("#aabbcc");
  return <HexColorPicker color={color} onChange={setColor} />;
};

All color picker components accept the following props:

Additionally, all pickers accept all standard div attributes such as className, style, and aria-label.

Since the color pickers do not include an input field by default, you can use the HexColorInput component to allow users to type or paste hex colors.

HexColorInput accepts the following props:

• alpha (boolean, default: false): Allows #rgba and #rrggbbaa color formats.
• prefixed (boolean, default: false): Enables # prefix displaying.

Example usage:

import { HexColorPicker, HexColorInput } from "react-colorful";

const YourComponent = () => {
  const [color, setColor] = useState("#aabbcc");
  return (
    <div>
      <HexColorPicker color={color} onChange={setColor} />
      <HexColorInput color={color} onChange={setColor} />
    </div>
  );
};

If you are not using React or Preact, you can use community-maintained ports of react-colorful:

• vanilla-colorful: A reimplementation in vanilla Custom Elements.
• angular-colorful: A version rewritten for the Angular framework.