React Colorful Color Picker

Common errors

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

  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).
  fix Use ES Module named imports: `import { HexColorPicker } from 'react-colorful';`

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

  cause 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.

  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.
  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.

Warnings

• breaking 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.
  Fix: Remove any `import 'react-colorful/dist/index.css';` statements from your codebase. The styles are now automatically included.
• breaking 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.
  Fix: Update all imports to use named exports, e.g., `import { HexColorPicker } from 'react-colorful';`.
• gotcha 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.
  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.
• gotcha 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.
  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.

Install

• npm install react-colorful npm
• yarn add react-colorful yarn
• pnpm add react-colorful pnpm

Imports

• HexColorPicker
  wrong:

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

  correct:

  import { HexColorPicker } from '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
  wrong:

  import RgbaColorPicker from 'react-colorful/rgba';

  correct:

  import { RgbaColorPicker } from 'react-colorful';

  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.

Quickstart

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;