React Color Palette

Common errors

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

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

  cause 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')

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

Warnings

• gotcha 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.
  Fix: Ensure `import 'react-color-palette/css';` is present in your application's entry point or the component where the color picker is used.
• gotcha 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.
  Fix: Refactor your code to ensure `useColor` is called unconditionally within a functional component or custom hook.
• gotcha 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.
  Fix: Verify behavior if you have highly customized event handling or accessibility implementations interacting directly with the color picker's DOM elements.
• gotcha 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.
  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.

Install

• npm install react-color-palette npm
• yarn add react-color-palette yarn
• pnpm add react-color-palette pnpm

Imports

• ColorPicker
  wrong:

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

  correct:

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

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

  import useColor from 'react-color-palette';

  correct:

  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
  wrong:

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

  correct:

  import 'react-color-palette/css';

  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
  wrong:

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

  correct:

  import { type 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.

Quickstart

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;