{"id":11664,"library":"react-color-palette","title":"React Color Palette","description":"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.","status":"active","version":"7.3.1","language":"javascript","source_language":"en","source_url":"https://github.com/Wondermarin/react-color-palette","tags":["javascript","react","react-component","color-palette","color palette","color-picker","color picker","color","picker","typescript"],"install":[{"cmd":"npm install react-color-palette","lang":"bash","label":"npm"},{"cmd":"yarn add react-color-palette","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-color-palette","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React components and hooks.","package":"react","optional":false}],"imports":[{"note":"The library primarily uses ES modules; CommonJS `require` might work with transpilation but is not the idiomatic usage.","wrong":"const { ColorPicker } = require('react-color-palette');","symbol":"ColorPicker","correct":"import { ColorPicker } from 'react-color-palette';"},{"note":"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.","wrong":"import useColor from 'react-color-palette';","symbol":"useColor","correct":"import { useColor } from 'react-color-palette';"},{"note":"The base styling is provided via a direct CSS import. This must be included for the components to render correctly with their default appearance.","wrong":"import { css } from 'react-color-palette';","symbol":"Stylesheet","correct":"import 'react-color-palette/css';"},{"note":"For TypeScript, `IColor` is a type. Using `import type` is recommended for explicit type-only imports to improve bundler optimizations.","wrong":"import { IColor } from 'react-color-palette';","symbol":"IColor","correct":"import { type IColor } from 'react-color-palette';"},{"note":"Individual components like Saturation, Hue, and Alpha are exported for custom layout implementations.","symbol":"Saturation","correct":"import { Saturation } from 'react-color-palette';"}],"quickstart":{"code":"import React from 'react';\nimport { ColorPicker, useColor } from 'react-color-palette';\nimport 'react-color-palette/css';\n\nfunction MyColorPickerComponent() {\n  // Initialize the color state using the useColor hook. \n  // It can accept HEX, RGB, HSL, or named CSS colors.\n  const [color, setColor] = useColor('#561ecb');\n\n  // Optional: Define a callback for when the color selection is finalized (e.g., mouse up).\n  const handleColorChangeComplete = (selectedColor) => {\n    console.log('Final color selected:', selectedColor.hex);\n    // Example: Save to local storage or dispatch an action\n    localStorage.setItem('lastSelectedColor', selectedColor.hex);\n  };\n\n  return (\n    <div>\n      <h1>My Application Color Selector</h1>\n      <ColorPicker \n        color={color} \n        onChange={setColor} \n        height={250} \n        width={450}\n        onChangeComplete={handleColorChangeComplete}\n        hideInput={['rgb', 'hsv']}\n      />\n      <p>Current HEX Color: {color.hex}</p>\n      <p>Current RGB Color: {color.rgb.r}, {color.rgb.g}, {color.rgb.b}</p>\n    </div>\n  );\n}\n\nexport default MyColorPickerComponent;","lang":"typescript","description":"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`."},"warnings":[{"fix":"Ensure `import 'react-color-palette/css';` is present in your application's entry point or the component where the color picker is used.","message":"The 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Refactor your code to ensure `useColor` is called unconditionally within a functional component or custom hook.","message":"The `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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Verify behavior if you have highly customized event handling or accessibility implementations interacting directly with the color picker's DOM elements.","message":"As 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.","severity":"gotcha","affected_versions":">=7.2.2"},{"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.","message":"Starting 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.","severity":"gotcha","affected_versions":">=7.1.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add `import 'react-color-palette/css';` to your component file or global stylesheet entry point.","cause":"The CSS stylesheet was not imported, or the import path is incorrect.","error":"Module not found: Can't resolve 'react-color-palette/css' in '[your-project-path]'"},{"fix":"Ensure `useColor` is only called inside a React functional component or another custom hook.","cause":"The `useColor` hook is being called in a regular JavaScript function or class component, violating React's Rules of Hooks.","error":"React Hook \"useColor\" is called in function \"MyComponent\" that is neither a React function component nor a custom React Hook function."},{"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.","cause":"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`.","error":"TypeError: Cannot read properties of undefined (reading 'hex')"}],"ecosystem":"npm"}