Registry / web-framework / react-color-palette

react-color-palette

library7.3.1jsnpmunverified

react-color-palette is a lightweight, performant React component library providing a comprehensive color picker interface. Currently stable at version 7.3.1, it receives regular maintenance and feature updates, with minor releases typically occurring every few months. Its core strength lies in its flexibility, offering a complete `<ColorPicker />` component for immediate use, alongside individual `<Saturation />`, `<Hue />`, and `<Alpha />` components for creating highly customized color picker layouts. It fully supports TypeScript, shipping with declaration files for all its components and hooks like `useColor`. Key features include robust support for various CSS color formats (HEX, RGB, HSL, named colors) in the `useColor` hook, an `onChangeComplete` callback for handling final color selections, and options to customize input visibility or disable the picker entirely. This makes it a versatile choice for applications requiring intuitive and customizable color selection capabilities within a React environment.

web-framework

npm install react-color-palette

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-COLOR-PALETT

react-color-palette

web-frameworkjavascriptv7.3.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.

ColorPicker

✓ import { ColorPicker } from 'react-color-palette';

✗ const { ColorPicker } = require('react-color-palette');

The library primarily uses ES modules; CommonJS `require` might work with transpilation but is not the idiomatic usage.

useColor

✓ import { useColor } from 'react-color-palette';

✗ import useColor from 'react-color-palette';

useColor is a named export, not a default export, and must be imported as such. It's a React Hook, subject to React's rules of Hooks.

Stylesheet

✓ import 'react-color-palette/css';

✗ import { css } from 'react-color-palette';

The base styling is provided via a direct CSS import. This must be included for the components to render correctly with their default appearance.

IColor

✓ import { type IColor } from 'react-color-palette';

✗ import { IColor } from 'react-color-palette';

For TypeScript, `IColor` is a type. Using `import type` is recommended for explicit type-only imports to improve bundler optimizations.

Saturation

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

Individual components like Saturation, Hue, and Alpha are exported for custom layout implementations.

This quickstart demonstrates the basic setup of the ColorPicker component, including state management with `useColor`, importing necessary CSS, and handling both continuous color changes and final selection with `onChangeComplete`.

import React from 'react'; import { ColorPicker, useColor } from 'react-color-palette'; import 'react-color-palette/css'; function MyColorPickerComponent() { // Initialize the color state using the useColor hook. // It can accept HEX, RGB, HSL, or named CSS colors. const [color, setColor] = useColor('#561ecb'); // Optional: Define a callback for when the color selection is finalized (e.g., mouse up). const handleColorChangeComplete = (selectedColor) => { console.log('Final color selected:', selectedColor.hex); // Example: Save to local storage or dispatch an action localStorage.setItem('lastSelectedColor', selectedColor.hex); }; return ( <div> <h1>My Application Color Selector</h1> <ColorPicker color={color} onChange={setColor} height={250} width={450} onChangeComplete={handleColorChangeComplete} hideInput={['rgb', 'hsv']} /> <p>Current HEX Color: {color.hex}</p> <p>Current RGB Color: {color.rgb.r}, {color.rgb.g}, {color.rgb.b}</p> </div> ); } export default MyColorPickerComponent;

Debug

Known issues

gotchaThe default styles for `react-color-palette` components are provided via a separate CSS file. Forgetting to import `'react-color-palette/css'` will result in an unstyled or poorly formatted color picker.

fix

Ensure `import 'react-color-palette/css';` is present in your application's entry point or the component where the color picker is used.

affects: >=1.0.0

gotchaThe `useColor` hook must follow React's Rules of Hooks. It cannot be called inside loops, conditions, or nested functions, and must always be called at the top level of a function component or custom hook.

fix

Refactor your code to ensure `useColor` is called unconditionally within a functional component or custom hook.

affects: >=1.0.0

gotchaAs of v7.2.2, the library replaced `pointer` events with separate `mouse` and `touch` events for broader compatibility. While this was a bug fix, applications that may have relied on specific `pointer` event properties or custom handlers interacting with the picker's internal mechanics might need re-testing.

fix

Verify behavior if you have highly customized event handling or accessibility implementations interacting directly with the color picker's DOM elements.

affects: >=7.2.2

gotchaStarting with v7.1.1, the `.css` files are marked as `sideEffect` in the package.json. If you are using a bundler (like Webpack or Rollup) configured for aggressive tree-shaking that does not respect the `sideEffects` flag, the necessary CSS might be inadvertently removed during the build process, leading to unstyled components.

fix

Ensure your bundler configuration (e.g., `webpack.config.js`) is set up to respect `sideEffects` in `package.json` for `node_modules`. For Webpack, this usually means `"sideEffects": true` in your `package.json` and a default `module.rules` setup.

affects: >=7.1.1

Errors

Common errors & fixes

Module not found: Can't resolve 'react-color-palette/css' in '[your-project-path]'

The CSS stylesheet was not imported, or the import path is incorrect.

fix

Add `import 'react-color-palette/css';` to your component file or global stylesheet entry point.

React Hook "useColor" is called in function "MyComponent" that is neither a React function component nor a custom React Hook function.

The `useColor` hook is being called in a regular JavaScript function or class component, violating React's Rules of Hooks.

fix

Ensure `useColor` is only called inside a React functional component or another custom hook.

TypeError: Cannot read properties of undefined (reading 'hex')

This often occurs if the `color` state from `useColor` is not initialized properly, or if you're trying to access its properties (`hex`, `rgb`, etc.) before the component has fully rendered or if the color value is unexpectedly `null` or `undefined`.

fix

Always initialize `useColor` with a valid default color value (e.g., `useColor('#000000')`). Ensure components consuming the color object handle potential `null` or `undefined` states if they can occur asynchronously.

Upgrade

Version history

7.3.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React components and hooks.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/Wondermarin/react-color-palette ↗

packagehttps://www.npmjs.com/package/react-color-palette ↗