React Color Picker Library

A modern, customizable React color picker component with TypeScript support.

Features

• 🎨 Intuitive color selection with HSV color space
• 📱 Responsive design with touch support
• 🎯 TypeScript support with full type definitions
• 📋 Built-in copy-to-clipboard functionality
• 🎛️ Customizable appearance and behavior
• ♿ Accessible design
• 🔧 Controlled and uncontrolled modes

Installation

```bash npm install react-color-picker-lib ```

Usage

Basic Usage

```tsx import { ColorPicker } from 'react-color-picker-lib'

function App() { const handleColorChange = (color) => { console.log('Selected color:', color.hex) }

return } ```

Advanced Usage

```tsx import { ColorPicker } from 'react-color-picker-lib' import type { ColorValue, HSV } from 'react-color-picker-lib'

function App() { const [color, setColor] = useState({ h: 200, s: 50, v: 80 })

const handleColorChange = (colorValue: ColorValue) => { setColor(colorValue.hsv) console.log('HEX:', colorValue.hex) console.log('RGB:', colorValue.rgb) console.log('HSV:', colorValue.hsv) }

return ( ) } ```

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | defaultValue | HSV | { h: 259, s: 66, v: 35 } | Initial color value | | value | HSV | undefined | Controlled color value | | onChange | (color: ColorValue) => void | undefined | Color change callback | | className | string | "" | Custom CSS class | | showCopyButtons | boolean | true | Show copy buttons | | showLabels | boolean | true | Show format labels | | width | number \| string | "100%" | Picker width | | height | number \| string | 256 | Picker height |

Types

```tsx interface HSV { h: number // 0-360 s: number // 0-100 v: number // 0-100 }

interface RGB { r: number // 0-255 g: number // 0-255 b: number // 0-255 }

interface ColorValue { hsv: HSV rgb: RGB hex: string } ```

License

MIT ```

```typescriptreact file="components/color-picker.tsx" isDeleted="true" ...deleted...