Registry / web-framework / react-colorful

react-colorful

library5.6.1jsnpmunverified

React Colorful is a highly optimized and lightweight color picker component designed for React and Preact applications. Currently stable at version 5.6.1, it provides a variety of color models including HEX, RGBA, HSLA, and HSVA, boasting a minimal bundle size (just 2.8 KB gzipped) and zero runtime dependencies. The library features a modern API leveraging React hooks and functional components, and comes with comprehensive TypeScript support. It prioritizes accessibility, adhering to WAI-ARIA guidelines, and offers full keyboard navigation and touch screen compatibility. A key differentiator is its significant performance and size advantage over alternatives like `react-color`, coupled with a tree-shakable architecture. Since v5, it has eliminated the need for external CSS imports, streamlining integration into any CSS-in-JS or component library environment. Releases are driven by feature enhancements and bug fixes, ensuring continuous improvement and stability.

web-framework

npm install react-colorful

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-COLORFUL

react-colorful

web-frameworkjavascriptv5.6.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

HexColorPicker

✓ import { HexColorPicker } from 'react-colorful';

✗ const HexColorPicker = require('react-colorful');

Since v3, `react-colorful` uses named exports. Direct CommonJS `require` of the main package will not work as expected for this symbol. This is the basic HEX color picker.

RgbaColorPicker

✓ import { RgbaColorPicker } from 'react-colorful';

✗ import RgbaColorPicker from 'react-colorful/rgba';

All color model pickers are available as named exports from the main package since v3. The `RgbaColorPicker` component was introduced in v4.0 for alpha channel support.

HexAlphaColorPicker

✓ import { HexAlphaColorPicker } from 'react-colorful';

This component was added in v5.6, providing a HEX color picker with alpha channel support.

ColorPickerBaseProps

✓ import type { ColorPickerBaseProps } from 'react-colorful';

TypeScript types are bundled with the library since v2.2. Use `import type` for type-only imports.

This quickstart demonstrates how to integrate the HexColorPicker component, manage its state using React hooks, and update the color dynamically. It also shows basic interactions.

import React, { useState } from 'react'; import { HexColorPicker } from 'react-colorful'; const MyColorPickerComponent = () => { const [color, setColor] = useState('#aabbcc'); return ( <div> <p>Selected Color: {color}</p> <HexColorPicker color={color} onChange={setColor} /> <button onClick={() => setColor('#ff0000')}>Set Red</button> <button onClick={() => setColor('#00ff00')}>Set Green</button> <button onClick={() => setColor('#0000ff')}>Set Blue</button> </div> ); }; export default MyColorPickerComponent;

Debug

Known issues

breakingStarting with v5, `react-colorful` no longer requires or supports a separate CSS import. The styles are now embedded within the component, simplifying usage and making it compatible with CSS-in-JS solutions. Attempting to import `react-colorful/dist/index.css` will result in a module not found error.

fix

Remove any `import 'react-colorful/dist/index.css';` statements from your codebase. The styles are now automatically included.

affects: >=5.0.0

breakingVersion 3.0 migrated the library to named exports and removed the default export. Direct `require('react-colorful')` or `import ColorPicker from 'react-colorful'` will no longer work for accessing components.

fix

Update all imports to use named exports, e.g., `import { HexColorPicker } from 'react-colorful';`.

affects: >=3.0.0

gotchaWith the removal of external CSS in v5, default styles are set to a higher priority. If you had custom styles overriding the previous external CSS, you might need to adjust your specificity or use more targeted selectors to ensure your styles apply correctly.

fix

Review and adjust your component's CSS rules. You might need to use more specific selectors or `!important` sparingly if absolutely necessary to override the component's internal styles.

affects: >=5.0.0

gotchaSince v5.2, the input color parsers have been significantly improved to support a wider range of valid CSS color notations and units (e.g., percentage syntax for RGB, various angular units for HSL, space/slash separated syntax). While not strictly a breaking change, ensure your color input strings conform to standard CSS formats for optimal parsing.

fix

Ensure color input strings for picker components follow valid CSS color notations (e.g., `rgb(100% 50% 25%)`, `hsl(100grad, 50%, 50%)`, `rgba(100% 50% 25% / 99%)`). Refer to CSS Color Module Level 4 specifications for details.

affects: >=5.2.0

Errors

Common errors & fixes

TypeError: (0 , react_colorful__WEBPACK_IMPORTED_MODULE_0__.HexColorPicker) is not a function

Attempting to use CommonJS `require()` syntax or an incorrect named import for a library that primarily uses ES Modules and named exports (since v3.0).

fix

Use ES Module named imports: `import { HexColorPicker } from 'react-colorful';`

Module not found: Error: Can't resolve 'react-colorful/dist/index.css'

Attempting to import the CSS file after v5.0, when the library removed the separate CSS export.

fix

Remove the line `import 'react-colorful/dist/index.css';` from your project. The component's styles are now embedded.

TypeError: Cannot read properties of undefined (reading 'r') OR Expected color to be a string, got object.

Passing an incorrect color value format to a specific color picker component. For instance, passing an `{r, g, b}` object to `HexColorPicker` which expects a string, or a HEX string to `RgbColorPicker` which expects an object.

fix

Ensure the `color` prop passed to each picker component matches its expected format. `HexColorPicker` expects `"#rrggbb"` or `"#rrggbbaa"` string. `RgbColorPicker` expects `{ r: number, g: number, b: number }` object. Check the 'Supported Color Models' section in the documentation for each picker's specific input/output format.

Upgrade

Version history

5.6.1latest on npm

Audit

Dependencies

reactrequiredRequired as a peer dependency for component rendering and React hooks.

react-domrequiredRequired as a peer dependency for rendering React components.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/omgovich/react-colorful ↗

packagehttps://www.npmjs.com/package/react-colorful ↗

homepagehttps://omgovich.github.io/react-colorful ↗