0
# React Color
1

2
React Color is a comprehensive React component library that provides 13 different color picker implementations including Sketch, Photoshop, Chrome, and other popular design tool interfaces. The library offers building block components for creating custom color pickers and uses 100% inline styles via ReactCSS for maximum portability.
3

4
## Package Information
5

6
- **Package Name**: react-color
7
- **Package Type**: npm  
8
- **Language**: JavaScript (React)
9
- **Installation**: `npm install react-color`
10

11
## Core Imports
12

13
```javascript
14
import { SketchPicker } from 'react-color';
15
import { ChromePicker } from 'react-color';
16
```
17

18
Multiple component imports:
19

20
```javascript
21
import { 
22
  SketchPicker, 
23
  ChromePicker, 
24
  BlockPicker,
25
  CompactPicker 
26
} from 'react-color';
27
```
28

29
CommonJS:
30

31
```javascript
32
const { SketchPicker, ChromePicker } = require('react-color');
33
```
34

35
Default import (ChromePicker):
36

37
```javascript
38
import ColorPicker from 'react-color';
39
// ChromePicker is the default export
40
```
41

42
## Basic Usage
43

44
```javascript
45
import React, { useState } from 'react';
46
import { SketchPicker } from 'react-color';
47

48
function MyComponent() {
49
  const [color, setColor] = useState('#ff0000');
50

51
  const handleColorChange = (colorResult) => {
52
    setColor(colorResult.hex);
53
  };
54

55
  return (
56
    <SketchPicker
57
      color={color}
58
      onChange={handleColorChange}
59
      onChangeComplete={handleColorChange}
60
    />
61
  );
62
}
63
```
64

65
## Architecture
66

67
React Color is built around several key components:
68

69
- **Color Pickers**: 13 pre-built picker components styled after popular design tools
70
- **Building Blocks**: Reusable UI components (Alpha, Hue, Saturation, etc.) for creating custom pickers
71
- **ColorWrap HOC**: Higher-order component that provides color state management and normalization
72
- **Helper Functions**: Utility functions for color validation, conversion, and manipulation
73
- **Inline Styling**: Uses ReactCSS for 100% inline styles, ensuring portability
74

75
## Capabilities
76

77
### Color Picker Components
78

79
Pre-built color picker components styled after popular design tools. Each picker supports customization through props and provides consistent color change callbacks.
80

81
```javascript { .api }
82
// Main picker components (all wrapped with ColorWrap HOC)
83
const SketchPicker: React.ComponentType<ColorPickerProps>;
84
const ChromePicker: React.ComponentType<ColorPickerProps>; // Also default export
85
const PhotoshopPicker: React.ComponentType<ColorPickerProps>;
86
const BlockPicker: React.ComponentType<BlockPickerProps>;
87
const CompactPicker: React.ComponentType<CompactPickerProps>;
88
```
89

90
[Color Picker Components](./color-pickers.md)
91

92
### Building Block Components  
93

94
Reusable UI components for creating custom color pickers. These components handle specific parts of the color selection process.
95

96
```javascript { .api }
97
const CustomPicker: (Component: React.ComponentType) => React.ComponentType<ColorPickerProps>;
98
const Alpha: React.ComponentType<AlphaProps>;
99
const Hue: React.ComponentType<HueProps>;
100
const Saturation: React.ComponentType<SaturationProps>;
101
```
102

103
[Building Block Components](./building-blocks.md)
104

105
### Color Utilities
106

107
Helper functions for color validation, conversion, manipulation, and checkboard pattern generation.
108

109
```javascript { .api }
110
function simpleCheckForValidColor(data: ColorData): ColorData | false;
111
function toState(data: ColorData, oldHue?: number): ColorState;
112
function isValidHex(hex: string): boolean;
113
function getContrastingColor(data: ColorData): string;
114
function render(c1: string, c2: string, size: number, serverCanvas?: any): string | null;
115
function get(c1: string, c2: string, size: number, serverCanvas?: any): string | null;
116
```
117

118
[Color Utilities](./color-utilities.md)
119

120
## Types
121

122
```javascript { .api }
123
interface ColorPickerProps {
124
  color?: string | ColorData;
125
  onChange?: (color: ColorState, event: Event) => void;
126
  onChangeComplete?: (color: ColorState, event: Event) => void;
127
  onSwatchHover?: (color: ColorState, event: Event) => void;
128
  disableAlpha?: boolean;
129
  styles?: object;
130
  className?: string;
131
}
132

133
interface ColorState {
134
  hsl: { h: number; s: number; l: number; a: number };
135
  hex: string;
136
  rgb: { r: number; g: number; b: number; a: number };
137
  hsv: { h: number; s: number; v: number; a: number };
138
  oldHue: number;
139
  source: string;
140
}
141

142
interface ColorData {
143
  hex?: string;
144
  r?: number;
145
  g?: number;
146
  b?: number;
147
  a?: number;
148
  h?: number;
149
  s?: number;
150
  l?: number;
151
  v?: number;
152
}
153

154
interface BlockPickerProps extends ColorPickerProps {
155
  width?: string | number;
156
  colors?: string[];
157
  triangle?: 'top' | 'hide';
158
}
159

160
interface CompactPickerProps extends ColorPickerProps {
161
  colors?: string[];
162
}
163
```