Package Exports

react-advanced-color-picker
react-advanced-color-picker/dist/index.esm.js
react-advanced-color-picker/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-advanced-color-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Advanced React Color Picker

A modern, feature-rich color picker component for React applications with support for multiple color formats, eyedropper functionality, and extensive customization options.

✨ Features

🎨 Multiple Color Formats: HEX, RGBA, RGB, HSVA, and Object formats
👁️ Eyedropper Tool: Pick colors from anywhere on the screen
🎯 Interactive Color Area: Intuitive saturation and brightness selection
🌈 Hue & Alpha Sliders: Precise color and transparency control
🎪 Preset Swatches: Quick access to commonly used colors
⚙️ Highly Customizable: Extensive styling and configuration options
📱 Touch Support: Works seamlessly on mobile devices
🔧 TypeScript Ready: Full type definitions included

🚀 Installation

npm install react-advanced-color-picker

📖 Quick Start

import React, { useState } from 'react';
import { ColorPicker } from './ColorPicker';

const App = () => {
  const [color, setColor] = useState('#FF5733FF');

  return (
    <div>
      <ColorPicker
        initialColor={{ r: 255, g: 87, b: 51, a: 1 }}
        onPickEnd={(color) => setColor(color)}
        format="HEX"
        showEyedropper={true}
        showPreview={true}
        showInputs={true}
        showSwatches={true}
      />
      <div>Selected Color: {color}</div>
    </div>
  );
};

🎛️ Props API

Prop	Type	Default	Description
`initialColor`	`{r: number, g: number, b: number, a: number}`	`{r: 0, g: 0, b: 0, a: 1}`	Starting color value
`onPickEnd`	`(color: string \| object) => void`	`null`	Callback fired when color selection ends
`format`	`'HEX' \| 'RGBA' \| 'RGB' \| 'HSVA' \| 'OBJECT'`	`'HEX'`	Output format for the color value
`showEyedropper`	`boolean`	`true`	Show/hide eyedropper button
`showPreview`	`boolean`	`true`	Show/hide color preview circle
`showInputs`	`boolean`	`true`	Show/hide RGB/Hex input fields
`showSwatches`	`boolean`	`true`	Show/hide preset color swatches
`presetSwatches`	`string[]`	`[default colors]`	Array of hex colors for quick selection
`className`	`string`	`''`	Additional CSS class for the container
`classNames`	`object`	`{}`	Custom classes for individual elements
`callOnDrag`	`boolean`	`false`	Fire onPickEnd callback during drag operations

🎨 Color Formats

The component supports multiple output formats:

// HEX format (default)
onPickEnd={(color) => console.log(color)} // "#FF5733FF"

// RGBA format
format="RGBA"
onPickEnd={(color) => console.log(color)} // "rgba(255, 87, 51, 1.00)"

// RGB format
format="RGB"
onPickEnd={(color) => console.log(color)} // "rgb(255, 87, 51)"

// HSVA format
format="HSVA"
onPickEnd={(color) => console.log(color)} // {h: 12, s: 80, v: 100, a: 1}

// Object format
format="OBJECT"
onPickEnd={(color) => console.log(color)} // {r: 255, g: 87, b: 51, a: 1}

🎯 Advanced Usage

Custom Styling

<ColorPicker
  className="my-color-picker"
  classNames={{
    container: 'custom-container',
    colorArea: 'custom-color-area',
    controlPanel: 'custom-controls',
    eyedropperBtn: 'custom-eyedropper',
    colorPreview: 'custom-preview',
    hueSlider: 'custom-hue-slider',
    alphaSlider: 'custom-alpha-slider',
    colorInputs: 'custom-inputs',
    swatchPalette: 'custom-swatches'
  }}
/>

Custom Preset Colors

<ColorPicker
  presetSwatches={[
    '#FF0000FF', '#00FF00FF', '#0000FFFF',
    '#FFFF00FF', '#FF00FFFF', '#00FFFFFF',
    '#000000FF', '#FFFFFFFF'
  ]}
/>

Real-time Color Updates

<ColorPicker
  callOnDrag={true}
  onPickEnd={(color) => {
    // This will fire continuously during drag operations
    updateBackgroundColor(color);
  }}
/>

🎨 CSS Classes

All elements use the cp-* prefix for easy styling:

.cp-container { /* Main container */ }
.cp-color-area { /* Color selection area */ }
.cp-color-indicator { /* Color picker crosshair */ }
.cp-hue-slider { /* Hue slider */ }
.cp-alpha-slider { /* Alpha/transparency slider */ }
.cp-color-preview { /* Color preview circle */ }
.cp-eyedropper-btn { /* Eyedropper button */ }
.cp-color-inputs { /* Input fields container */ }
.cp-swatch { /* Individual color swatch */ }
.cp-swatch-palette { /* Swatches container */ }

🖥️ Browser Support

Chrome 60+
Firefox 55+
Safari 12+
Edge 79+
Brave 1.11+ (The screen color picker is not supported or fill laggy in Brave)
Opera 57+

📱 Mobile Support

The color picker is fully responsive and supports touch interactions on mobile devices.

📄 License

This project is licensed under the ISC License - see the LICENSE file for details.

Made with ❤️ for the React community