🎨 React Color Palette Wheel

A professional, lightweight, and fully typed color wheel component for React. Inspired by tools like Adobe Color, this library allows color selection based on Chromatic Harmonies (Triad, Complementary, Analogous, etc.) with geometric precision.

✨ Highlights

• Ultra Lightweight: Only ~16.4kB (packed).
• Mathematical Harmonies: Precise algorithms for complex color schemes.
• TypeScript: Native type definitions (.d.ts) included.
• Performance: Optimized Canvas rendering.
• Zero Config: Works out of the box with sensible defaults.

📦 Installation

npm install react-color-palette-wheel
# or
yarn add react-color-palette-wheel

🚀 Basic Usage

import { useState } from 'react';
import { ColorWheel, HarmonyType, CursorData } from 'react-color-palette-wheel';

function App() {
    const [colors, setColors] = useState<CursorData[]>([]);

    return (
        <div>
            <h1>Harmony Selector</h1>
            
            <ColorWheel
                radius={250}                 // Wheel radius (Total diameter: 500px)
                harmony={HarmonyType.Triad}  // Harmony type (e.g., Triad)
                onChange={setColors}         // Callback with selected colors
            />
        </div>
    );
}

Sandbox

https://codesandbox.io/p/sandbox/eloquent-franklin-rh3357

🛠️ Build Details

• Formats: ESM (.es.js) and UMD (.umd.js).
• Size: ~16kB (Minified + Gzipped).
• Typing: Full TypeScript support.

📄 License

MIT