{"id":11665,"library":"react-colorful","title":"React Colorful Color Picker","description":"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.","status":"active","version":"5.6.1","language":"javascript","source_language":"en","source_url":"https://github.com/omgovich/react-colorful","tags":["javascript","react","color picker","react-component","colorpicker","tiny","hex","color","front-end","typescript"],"install":[{"cmd":"npm install react-colorful","lang":"bash","label":"npm"},{"cmd":"yarn add react-colorful","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-colorful","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for component rendering and React hooks.","package":"react","optional":false},{"reason":"Required as a peer dependency for rendering React components.","package":"react-dom","optional":false}],"imports":[{"note":"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.","wrong":"const HexColorPicker = require('react-colorful');","symbol":"HexColorPicker","correct":"import { HexColorPicker } from 'react-colorful';"},{"note":"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.","wrong":"import RgbaColorPicker from 'react-colorful/rgba';","symbol":"RgbaColorPicker","correct":"import { RgbaColorPicker } from 'react-colorful';"},{"note":"This component was added in v5.6, providing a HEX color picker with alpha channel support.","symbol":"HexAlphaColorPicker","correct":"import { HexAlphaColorPicker } from 'react-colorful';"},{"note":"TypeScript types are bundled with the library since v2.2. Use `import type` for type-only imports.","symbol":"ColorPickerBaseProps","correct":"import type { ColorPickerBaseProps } from 'react-colorful';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport { HexColorPicker } from 'react-colorful';\n\nconst MyColorPickerComponent = () => {\n  const [color, setColor] = useState('#aabbcc');\n\n  return (\n    <div>\n      <p>Selected Color: {color}</p>\n      <HexColorPicker color={color} onChange={setColor} />\n      <button onClick={() => setColor('#ff0000')}>Set Red</button>\n      <button onClick={() => setColor('#00ff00')}>Set Green</button>\n      <button onClick={() => setColor('#0000ff')}>Set Blue</button>\n    </div>\n  );\n};\n\nexport default MyColorPickerComponent;","lang":"typescript","description":"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."},"warnings":[{"fix":"Remove any `import 'react-colorful/dist/index.css';` statements from your codebase. The styles are now automatically included.","message":"Starting 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.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Update all imports to use named exports, e.g., `import { HexColorPicker } from 'react-colorful';`.","message":"Version 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.","severity":"breaking","affected_versions":">=3.0.0"},{"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.","message":"With 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.","severity":"gotcha","affected_versions":">=5.0.0"},{"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.","message":"Since 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.","severity":"gotcha","affected_versions":">=5.2.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Use ES Module named imports: `import { HexColorPicker } from 'react-colorful';`","cause":"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).","error":"TypeError: (0 , react_colorful__WEBPACK_IMPORTED_MODULE_0__.HexColorPicker) is not a function"},{"fix":"Remove the line `import 'react-colorful/dist/index.css';` from your project. The component's styles are now embedded.","cause":"Attempting to import the CSS file after v5.0, when the library removed the separate CSS export.","error":"Module not found: Error: Can't resolve 'react-colorful/dist/index.css'"},{"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.","cause":"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.","error":"TypeError: Cannot read properties of undefined (reading 'r') OR Expected color to be a string, got object."}],"ecosystem":"npm"}