### Install the package

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/README.md

Use npm or yarn to add the dependency to your project.

```bash
npm install react-best-gradient-color-picker
yarn add react-best-gradient-color-picker
```

--------------------------------

### Install the package

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/QUICK-REFERENCE.md

Run this command in your terminal to add the library to your project dependencies.

```bash
npm install react-best-gradient-color-picker
```

--------------------------------

### Install react-best-gradient-color-picker

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/integration-guide.md

Use npm or yarn to add the package to your project dependencies.

```bash
npm install react-best-gradient-color-picker
# or
yarn add react-best-gradient-color-picker
```

--------------------------------

### Implement TypeScript Color Picker

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/integration-guide.md

Example of using the library with TypeScript interfaces and state management.

```typescript
import React, { useState } from 'react'
import ColorPicker, { useColorPicker } from 'react-best-gradient-color-picker'
import type { ColorPickerProps } from 'react-best-gradient-color-picker'

interface ThemeColors {
  primary: string
  secondary: string
  accent: string
}

interface PickerComponentProps {
  color: string
  onChange: (color: string) => void
}

const CustomPicker: React.FC<PickerComponentProps> = ({ color, onChange }) => {
  return <ColorPicker value={color} onChange={onChange} />
}

export default function App() {
  const [theme, setTheme] = useState<ThemeColors>({
    primary: 'rgba(100, 150, 200, 1)',
    secondary: 'rgba(200, 100, 150, 1)',
    accent: 'rgba(100, 200, 150, 1)'
  })
  
  const handleColorChange = (key: keyof ThemeColors, color: string) => {
    setTheme({ ...theme, [key]: color })
  }
  
  return (
    <div>
      <CustomPicker
        color={theme.primary}
        onChange={(color) => handleColorChange('primary', color)}
      />
    </div>
  )
}
```

--------------------------------

### Example usage of gradientParser

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/api-reference/gradient-parser.md

Demonstrates parsing various gradient types and color formats.

```typescript
import { gradientParser } from 'react-best-gradient-color-picker'

// Parse a linear gradient
const gradient = gradientParser(
  'linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(0,0,255,1) 100%)'
)
// Returns: {
//   type: 'linear-gradient',
//   orientation: { type: 'angular', value: '90' },
//   colorStops: [
//     { value: 'RGBA(255, 0, 0, 1)', left: 0 },    // First is uppercase (selected)
//     { value: 'rgba(0, 0, 255, 1)', left: 100 }   // Others are lowercase
//   ]
// }

// Parse a radial gradient
const radial = gradientParser(
  'radial-gradient(circle, rgba(255,0,0,1) 0%, rgba(0,0,255,1) 100%)'
)
// Returns: {
//   type: 'radial-gradient',
//   orientation: [/* radial orientation data */],
//   colorStops: [
//     { value: 'RGBA(255, 0, 0, 1)', left: 0 },
//     { value: 'rgba(0, 0, 255, 1)', left: 100 }
//   ]
// }

// Parse with hex colors
const hexGradient = gradientParser(
  'linear-gradient(45deg, #FF0000 0%, #0000FF 100%)'
)
// Hex colors are converted to RGBA automatically

// Parse with shorthand direction
const directional = gradientParser(
  'linear-gradient(to bottom right, rgb(255, 0, 0), rgb(0, 0, 255))'
)
```

--------------------------------

### Use rgb2cmyk

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/api-reference/converters.md

Examples of converting RGB values to CMYK.

```typescript
import { rgb2cmyk } from 'react-best-gradient-color-picker'

const cmyk = rgb2cmyk(255, 0, 0)
// Returns: { c: 0, m: 1, y: 1, k: 0 }

const cmyk2 = rgb2cmyk(100, 150, 200)
// Returns: { c: 0.5, m: 0.25, y: 0, k: 0.216 }
```

--------------------------------

### Define color value formats

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/README.md

Examples of valid RGBA and CSS gradient string formats used by the component.

```text
rgba(red, green, blue, alpha)
rgba(255, 0, 0, 1)         // Fully opaque red
rgba(0, 255, 0, 0.5)       // Semi-transparent green
```

```text
linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(0,0,255,1) 100%)
radial-gradient(circle, rgba(255,0,0,1) 0%, rgba(0,0,255,1) 100%)
```

--------------------------------

### Use cmykToRgb

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/api-reference/converters.md

Examples of converting CMYK values to RGB.

```typescript
import { cmykToRgb } from 'react-best-gradient-color-picker'

const rgb = cmykToRgb({ c: 0, m: 1, y: 1, k: 0 })
// Returns: { r: 255, g: 0, b: 0 }

const rgb2 = cmykToRgb({ c: 0.5, m: 0.25, y: 0, k: 0.216 })
// Returns approximately: { r: 100, g: 150, b: 200 }
```

--------------------------------

### Use getHexAlpha

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/api-reference/converters.md

Examples of converting opacity values to hexadecimal alpha strings.

```typescript
import { getHexAlpha } from 'react-best-gradient-color-picker'

getHexAlpha(1)      // Returns: 'FF'
getHexAlpha(0.8)    // Returns: 'CC'
getHexAlpha(0.5)    // Returns: '80'
getHexAlpha(0.25)   // Returns: '40'
getHexAlpha(0)      // Returns: '00'
getHexAlpha(1.5)    // Returns: 'FF' (clamped)
getHexAlpha(-0.5)   // Returns: '00' (clamped)
```

--------------------------------

### Supported linear gradient formats

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/api-reference/gradient-parser.md

Examples of valid linear gradient strings including angles, direction keywords, and vendor prefixes.

```typescript
// With angle
'linear-gradient(45deg, rgba(255,0,0,1) 0%, rgba(0,0,255,1) 100%)'

// With direction keywords
'linear-gradient(to right, rgba(255,0,0,1), rgba(0,0,255,1))'
'linear-gradient(to bottom right, rgba(255,0,0,1), rgba(0,0,255,1))'

// Vendor prefixed
'-webkit-linear-gradient(90deg, rgba(255,0,0,1), rgba(0,0,255,1))'
```

--------------------------------

### Manipulate Solid Colors

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/api-reference/use-color-picker-hook.md

Example of using hook functions to bind individual RGBA channels to input elements.

```typescript
import React, { useState } from 'react'
import ColorPicker, { useColorPicker } from 'react-best-gradient-color-picker'

function App() {
  const [color, setColor] = useState('rgba(255, 100, 50, 1)')
  const { setR, setG, setB, setA, rgbaArr } = useColorPicker(color, setColor)
  
  return (
    <div>
      <label>
        Red: <input type="number" value={rgbaArr[0]} onChange={(e) => setR(+e.target.value)} />
      </label>
      <label>
        Green: <input type="number" value={rgbaArr[1]} onChange={(e) => setG(+e.target.value)} />
      </label>
      <label>
        Blue: <input type="number" value={rgbaArr[2]} onChange={(e) => setB(+e.target.value)} />
      </label>
      <label>
        Opacity: <input type="number" value={rgbaArr[3]} onChange={(e) => setA(+e.target.value)} />
      </label>
      <ColorPicker value={color} onChange={setColor} />
    </div>
  )
}
```

--------------------------------

### Supported radial gradient formats

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/api-reference/gradient-parser.md

Examples of valid radial gradient strings including shape and extent keywords.

```typescript
// Circle
'radial-gradient(circle, rgba(255,0,0,1) 0%, rgba(0,0,255,1) 100%)'

// Ellipse
'radial-gradient(ellipse, rgba(255,0,0,1), rgba(0,0,255,1))'

// With extent keywords
'radial-gradient(circle closest-side, rgba(255,0,0,1), rgba(0,0,255,1))'
```

--------------------------------

### Import Utility Functions

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/README.md

Helper functions for color space conversions and gradient string parsing.

```typescript
// Color space conversions
import { rgb2cmyk, cmykToRgb, getHexAlpha } from 'react-best-gradient-color-picker'

// Gradient parsing
import { gradientParser } from 'react-best-gradient-color-picker'
```

--------------------------------

### Implement a Basic Solid Color Picker

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/api-reference/color-picker.md

Use this to render a standard color picker with state management for a solid color value.

```typescript
import React, { useState } from 'react'
import ColorPicker from 'react-best-gradient-color-picker'

function App() {
  const [color, setColor] = useState('rgba(255, 100, 0, 1)')
  
  return (
    <div>
      <ColorPicker value={color} onChange={setColor} />
      <p>Selected color: {color}</p>
    </div>
  )
}
```

--------------------------------

### Switching between solid and gradient modes

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/README.md

Demonstrates updating the color state to switch between solid rgba values and linear gradient strings.

```js
import React from 'react'
import ColorPicker from 'react-best-gradient-color-picker'

function MyApp() {
  const [color, setColor] = useState('linear-gradient(90deg, rgba(96,93,93,1) 0%, rgba(255,255,255,1) 100%)');
  
  const setSolid = () => {
    setColor('rgba(255,255,255,1)') //color could be any rgba value
  }

  return(
    <div>
      <button onClick={setSolid}>Solid</button>
      <ColorPicker value={color} onChange={setColor} />
    </div>
   )
}
```

```js
  const setGradient = () => {
    setColor('linear-gradient(90deg, rgba(96,93,93,1) 0%, rgba(255,255,255,1) 100%)')
  }
```

--------------------------------

### Implement basic color picker

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/README.md

Import the ColorPicker component and manage the color state using the onChange callback.

```typescript
import React, { useState } from 'react'
import ColorPicker from 'react-best-gradient-color-picker'

export default function App() {
  const [color, setColor] = useState('rgba(175, 51, 242, 1)')
  
  return (
    <div>
      <ColorPicker value={color} onChange={setColor} />
      <p>Selected: {color}</p>
    </div>
  )
}
```

--------------------------------

### Import ColorPicker Component

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/api-reference/color-picker.md

Import the component into your project to begin using it.

```typescript
import ColorPicker from 'react-best-gradient-color-picker'
```

--------------------------------

### Basic Gradient Picker

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/integration-guide.md

Initialize with a gradient string to enable both solid and gradient color modes.

```typescript
import React, { useState } from 'react'
import ColorPicker from 'react-best-gradient-color-picker'

export default function App() {
  const [gradient, setGradient] = useState(
    'linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(0,0,255,1) 100%)'
  )
  
  return (
    <div>
      <h1>Gradient Picker</h1>
      <ColorPicker value={gradient} onChange={setGradient} />
      <div style={{ background: gradient, width: '200px', height: '100px' }} />
    </div>
  )
}
```

--------------------------------

### Configure Gradient Picker with Custom Presets

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/api-reference/color-picker.md

Pass an array of color strings to the presets prop to provide quick-select options for the user.

```typescript
import React, { useState } from 'react'
import ColorPicker from 'react-best-gradient-color-picker'

function App() {
  const [gradient, setGradient] = useState(
    'linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(0,0,255,1) 100%)'
  )
  
  const customPresets = [
    'rgba(255, 0, 0, 1)',
    'rgba(0, 255, 0, 1)',
    'rgba(0, 0, 255, 1)',
    'rgba(255, 255, 0, 1)',
  ]
  
  return (
    <ColorPicker
      value={gradient}
      onChange={setGradient}
      presets={customPresets}
      width={350}
      height={350}
    />
  )
}
```

--------------------------------

### Implement Basic Color Picker

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/README.md

Use the ColorPicker component by providing a value and an onChange handler to manage the color state.

```js
import React from 'react'
import ColorPicker from 'react-best-gradient-color-picker'

function MyApp() {
  const [color, setColor] = useState('rgba(255,255,255,1)');

  return <ColorPicker value={color} onChange={setColor} />
}
```

--------------------------------

### Basic Solid Color Picker

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/integration-guide.md

Implement a simple color picker for solid color selection.

```typescript
import React, { useState } from 'react'
import ColorPicker from 'react-best-gradient-color-picker'

export default function App() {
  const [color, setColor] = useState('rgba(175, 51, 242, 1)')
  
  return (
    <div>
      <h1>Color Picker</h1>
      <ColorPicker value={color} onChange={setColor} />
      <p>Selected color: {color}</p>
    </div>
  )
}
```

--------------------------------

### ESM Build Paths

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/EXPORTS.md

Location of the ESM build files.

```text
./dist/esm/index.js
./dist/esm/*.d.ts
```

--------------------------------

### Define Package Entry Point

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/EXPORTS.md

The main entry point in src/index.ts exporting the primary component, hooks, and types.

```typescript
// Default export
export { default as ColorPicker } from './components/index.js'

// Named exports
export { useColorPicker } from './hooks/useColorPicker.js'

// Type exports
export type {
  Styles,
  ColorsProps,
  PassedConfig,
  LocalesProps,
  GradientProps,
  ColorPickerProps,
} from './shared/types.js'
```

--------------------------------

### useColorPicker(color, setColor)

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/README.md

Initializes the hook to manage the color picker state.

```APIDOC
## useColorPicker(color, setColor)

### Description
Initializes the hook by passing in the current color value and the state setter function to gain control over the picker.

### Parameters
- **color** (string) - Required - The current color or gradient string.
- **setColor** (function) - Required - The state setter function to update the color value.
```

--------------------------------

### Import Color Converters

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/api-reference/converters.md

Import the necessary conversion utilities from the package.

```typescript
import { rgb2cmyk, cmykToRgb, getHexAlpha } from 'react-best-gradient-color-picker'
```

--------------------------------

### Import the gradient parser

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/api-reference/gradient-parser.md

Import the utility function from the package.

```typescript
import { gradientParser } from 'react-best-gradient-color-picker'
```

--------------------------------

### Production Dependencies Configuration

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/EXPORTS.md

Required production dependencies for the library.

```json
{
  "dependencies": {
    "html2canvas": "^1.4.1",
    "lodash.throttle": "^4.1.1",
    "tinycolor2": "1.4.2"
  }
}
```

--------------------------------

### Peer Dependencies Configuration

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/EXPORTS.md

Required peer dependencies for the library.

```json
{
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
  }
}
```

--------------------------------

### CommonJS Build Paths

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/EXPORTS.md

Location of the CommonJS build files.

```text
./dist/cjs/index.js
./dist/cjs/*.d.ts
```

--------------------------------

### Import components and hooks

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/QUICK-REFERENCE.md

Import the main ColorPicker component and the useColorPicker hook from the package.

```typescript
import ColorPicker, { useColorPicker } from 'react-best-gradient-color-picker'
```

--------------------------------

### Configure Package Exports

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/EXPORTS.md

The package.json configuration defining ESM and CJS entry points.

```json
{
  "exports": {
    ".": {
      "import": "./dist/esm/index.js",
      "require": "./dist/cjs/index.js"
    }
  }
}
```

--------------------------------

### Implementing a Gradient Picker

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/QUICK-REFERENCE.md

Standard implementation for picking a gradient string.

```typescript
const [gradient, setGradient] = useState('linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(0,0,255,1) 100%)')
<ColorPicker value={gradient} onChange={setGradient} />
```

--------------------------------

### Implement Complete Configuration in React

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/configuration.md

Define a custom configuration object to adjust UI element sizes and set default color values for the ColorPicker component.

```typescript
import React, { useState } from 'react'
import ColorPicker from 'react-best-gradient-color-picker'

function App() {
  const [color, setColor] = useState('rgba(175, 51, 242, 1)')
  
  const customConfig = {
    // Larger, more accessible UI elements
    barSize: 24,
    crossSize: 20,
    
    // Brand colors as defaults
    defaultColor: 'rgba(66, 133, 244, 1)',      // Brand blue
    defaultGradient: 'linear-gradient(135deg, rgba(66, 133, 244, 1) 0%, rgba(219, 68, 55, 1) 100%)'  // Brand gradient
  }
  
  return (
    <ColorPicker
      value={color}
      onChange={setColor}
      width={350}
      height={350}
      config={customConfig}
    />
  )
}

export default App
```

--------------------------------

### Project Documentation Directory Structure

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/00-START-HERE.md

Visual representation of the project's documentation file organization.

```text
output/
├── 00-START-HERE.md          ← You are here
├── README.md                  ← Project overview
├── QUICK-REFERENCE.md         ← Fast lookup
├── INDEX.md                   ← Complete index
├── EXPORTS.md                 ← What's exported
├── types.md                   ← Type definitions
├── configuration.md           ← Config options
├── integration-guide.md       ← Integration patterns
└── api-reference/
    ├── color-picker.md        ← Component API
    ├── use-color-picker-hook.md ← Hook API
    ├── converters.md          ← Color conversions
    ├── gradient-parser.md     ← Gradient parsing
    └── utility-functions.md   ← Utilities
```

--------------------------------

### Implement Custom RGBA Inputs

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/README.md

Provides manual control over individual RGBA channels using the useColorPicker hook.

```js
import React from 'react'
import ColorPicker, { useColorPicker } from 'react-best-gradient-color-picker'

function MyApp() {
  const [color, setColor] = useState('linear-gradient(90deg, rgba(96,93,93,1) 0%, rgba(255,255,255,1) 100%)');
  const { setR, setG, setB, setA, rgbaArr } = useColorPicker(color, setColor);

  return(
    <div>
      <input value={rgbaArr[0]} onChange={(e) => setR(e.target.value)} />
      <input value={rgbaArr[1]} onChange={(e) => setG(e.target.value)} />
      <input value={rgbaArr[2]} onChange={(e) => setB(e.target.value)} />
      <input value={rgbaArr[3]} onChange={(e) => setA(e.target.value)} />
      <ColorPicker value={color} onChange={setColor} hideInputs={true} />
    </div>
   )
}
```

--------------------------------

### Utility Functions

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/README.md

Helper functions for color space conversions and gradient parsing.

```APIDOC
## Utility Functions

### Description
Exported utilities for handling color space conversions (RGB, CMYK) and parsing gradient strings.

### Usage
```typescript
import { rgb2cmyk, cmykToRgb, getHexAlpha, gradientParser } from 'react-best-gradient-color-picker'
```
```

--------------------------------

### Configure Custom Presets

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/README.md

Sets custom color presets for the picker. Note that arrays are limited to 18 colors.

```js
import React from 'react'
import ColorPicker from 'react-best-gradient-color-picker'

const customPresets = [
  'rgba(34, 164, 65, 1)',
  'rgba(210, 18, 40, .5)',
  'rgba(90, 110, 232, 1)',
  'rgba(65, 89, 56, 1)',
  'rgba(98, 189, 243, 1)',
  'rgba(255, 210, 198, 1)',
  'rgba(94, 94, 94, 1)'
] //max 18 colors, you can pass in more but the array will be sliced to the first 18

function MyApp() {
  const [color, setColor] = useState('rgba(255,255,255,1');

  return <ColorPicker value={color} onChange={setColor} presets={customPresets} />
}
```

--------------------------------

### Define TypeScript Configuration Types

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/configuration.md

Reference these type definitions to understand the structure of the user-provided and internal configuration objects.

```typescript
// User-provided config (all optional)
type PassedConfig = {
  barSize?: number
  crossSize?: number
  defaultColor?: string
  defaultGradient?: string
}

// Resolved internal config (all required)
type Config = {
  barSize: number
  crossSize: number
  defaultColor: string
  defaultGradient: string
}
```

--------------------------------

### Project Directory Structure

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/README.md

Visual representation of the library's source code organization and component hierarchy.

```text
react-gradient-color-picker/
├── src/
│   ├── components/
│   │   ├── ColorPicker.tsx       (Main component)
│   │   ├── Picker.tsx            (Picker layout)
│   │   ├── Square.tsx            (Color picker square)
│   │   ├── Hue.tsx               (Hue slider)
│   │   ├── Opacity.tsx           (Opacity slider)
│   │   ├── Inputs.tsx            (Color input fields)
│   │   ├── Controls.tsx          (Top control buttons)
│   │   ├── GradientBar.tsx       (Gradient stop editor)
│   │   ├── GradientControls.tsx  (Gradient management)
│   │   ├── Presets.tsx           (Preset colors)
│   │   ├── EyeDropper.tsx        (Eye dropper tool)
│   │   ├── AdvancedControls.tsx  (Advanced sliders)
│   │   └── ComparibleColors.tsx  (Color guide)
│   ├── hooks/
│   │   └── useColorPicker.ts     (State management hook)
│   ├── utils/
│   │   ├── converters.ts         (Color space conversions)
│   │   ├── gradientParser.ts     (CSS gradient parser)
│   │   ├── formatters.ts         (Formatting utilities)
│   │   └── utils.ts              (Helper functions)
│   ├── shared/
│   │   └── types.ts              (TypeScript definitions)
│   ├── context.tsx               (React context for state)
│   ├── constants.ts              (Constants & defaults)
│   └── index.ts                  (Public API entry point)
├── dist/                         (Compiled output)
├── package.json                  (Dependencies & scripts)
└── tsconfig.json                 (TypeScript config)
```

--------------------------------

### Convert Objects and Strings

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/EXPORTS.md

Utilities for object serialization and extracting color details from strings.

```typescript
objectToString(value: any): string
getColorObj(colors: ColorsProps[], defaultGradient: string): { currentColor, selectedColor, currentLeft }
getDetails(value: string): { degrees, degreeStr, isGradient, gradientType }
```

--------------------------------

### Initialize useColorPicker hook

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/README.md

Initialize the hook by passing the current color state and the corresponding setter function to gain access to picker control methods.

```js
import React from 'react'
import ColorPicker, { useColorPicker } from 'react-best-gradient-color-picker'

function MyApp() {
  const [color, setColor] = useState('linear-gradient(90deg, rgba(96,93,93,1) 0%, rgba(255,255,255,1) 100%)');
  const { setSolid, setGradient } = useColorPicker(color, setColor);

  return(
    <div>
      <button onClick={setSolid}>Solid</button>
      <button onClick={setGradient}>Gradient</button>
      <ColorPicker value={color} onChange={setColor} />
    </div>
   )
}
```

--------------------------------

### Importing Main Bundle Components and Types

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/EXPORTS.md

Use these imports to access the primary component, hook, and type definitions from the library.

```typescript
// Default export
import ColorPicker from 'react-best-gradient-color-picker'

// Named exports
import { useColorPicker } from 'react-best-gradient-color-picker'

// Types
import type { ColorPickerProps } from 'react-best-gradient-color-picker'
```

--------------------------------

### Color Display with Preview

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/integration-guide.md

Display the selected color in real-time using a preview element.

```typescript
import React, { useState } from 'react'
import ColorPicker from 'react-best-gradient-color-picker'

export default function App() {
  const [color, setColor] = useState('rgba(100, 150, 200, 1)')
  
  return (
    <div style={{ display: 'flex', gap: '20px' }}>
      <div>
        <h2>Color Picker</h2>
        <ColorPicker value={color} onChange={setColor} />
      </div>
      <div>
        <h2>Preview</h2>
        <div
          style={{
            width: '200px',
            height: '200px',
            backgroundColor: color,
            border: '2px solid #ccc',
            borderRadius: '8px'
          }}
        />
        <p style={{ marginTop: '10px', fontFamily: 'monospace' }}>{color}</p>
      </div>
    </div>
  )
}
```

--------------------------------

### Configuring Brand Colors

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/configuration.md

Apply brand-specific colors and gradients by passing them to the config prop.

```typescript
config={{
  defaultColor: '#your-brand-color',
  defaultGradient: 'linear-gradient(90deg, #brand-color-1, #brand-color-2)'
}}
```

--------------------------------

### Import and Use useColorPicker Hook

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/EXPORTS.md

Import the hook to manage color picker state programmatically. The hook requires a value, an onChange callback, and an optional configuration object.

```typescript
import { useColorPicker } from 'react-best-gradient-color-picker'
```

```typescript
function useColorPicker(
  value: string,
  onChange: (value: string) => void,
  config?: Config
): UseColorPickerReturn
```

--------------------------------

### Implement Custom Gradient Controls

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/README.md

Uses the useColorPicker hook to manually control gradient types, degrees, and color points while hiding default controls.

```js
import React from 'react'
import ColorPicker, { useColorPicker } from 'react-best-gradient-color-picker'

function MyApp() {
  const [color, setColor] = useState('linear-gradient(90deg, rgba(96,93,93,1) 0%, rgba(255,255,255,1) 100%)');
  const { gradientType, setLinear, setRadial, addPoint, deletePoint, degrees, setDegrees, setPointLeft, currentLeft, selectedPoint } = useColorPicker(color, setColor);

  return(
    <div>
      <button onClick={setLinear}>Linear</button>
      <button onClick={setRadial}>Radial</button>
      {gradientType === 'linear-gradient' && <input value={degrees} onChange={(e) => setDegrees(e.target.value)} />}
      <input value={currentLeft} onChange={(e) => setPointLeft(e.target.value)} />
      <button onClick={() => addPoint(50)}>Add Color</button>
      <button onClick={() => deletePoint(selectedPoint)}>Delete Color</button>
      <ColorPicker value={color} onChange={setColor} hideControls={true} />
    </div>
   )
}
```

--------------------------------

### Control Gradient Stops and Types

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/api-reference/use-color-picker-hook.md

Demonstrates custom UI controls for switching gradient types, adjusting angles, and managing gradient stops.

```typescript
import React, { useState } from 'react'
import ColorPicker, { useColorPicker } from 'react-best-gradient-color-picker'

function App() {
  const [gradient, setGradient] = useState(
    'linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(0,0,255,1) 100%)'
  )
  
  const {
    gradientType,
    setLinear,
    setRadial,
    degrees,
    setDegrees,
    currentLeft,
    setPointLeft,
    addPoint,
    deletePoint,
    selectedPoint
  } = useColorPicker(gradient, setGradient)
  
  return (
    <div>
      <div style={{ marginBottom: '20px' }}>
        <button onClick={setLinear} style={{ marginRight: '10px' }}>
          Linear
        </button>
        <button onClick={setRadial}>Radial</button>
        
        {gradientType === 'linear-gradient' && (
          <input
            type="range"
            min="0"
            max="360"
            value={degrees}
            onChange={(e) => setDegrees(+e.target.value)}
            style={{ marginLeft: '20px' }}
          />
        )}
      </div>
      
      <div style={{ marginBottom: '20px' }}>
        <label>
          Position: 
          <input
            type="number"
            min="0"
            max="100"
            value={currentLeft}
            onChange={(e) => setPointLeft(+e.target.value)}
          />
        </label>
        <button onClick={() => addPoint(50)} style={{ marginLeft: '10px' }}>
          Add Stop
        </button>
        <button onClick={() => deletePoint(selectedPoint)} style={{ marginLeft: '10px' }}>
          Delete Stop
        </button>
      </div>
      
      <ColorPicker value={gradient} onChange={setGradient} />
    </div>
  )
}
```

--------------------------------

### Included Functions

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/README.md

Methods available from the useColorPicker hook to manipulate color and gradient properties.

```APIDOC
## Included Functions

- **handleChange(value)**: Sets the color value of the selected point (rgba string).
- **setLinear()**: Changes gradient type to linear.
- **setRadial()**: Changes gradient type to radial.
- **setDegrees(degrees)**: Sets linear gradient degrees (0-360).
- **setSolid(newColor)**: Switches mode to solid (optional rgba string).
- **setGradient(newGradient)**: Switches mode to gradient (optional CSS gradient string).
- **setR(value)**: Sets red channel (0-255).
- **setG(value)**: Sets green channel (0-255).
- **setB(value)**: Sets blue channel (0-255).
- **setA(value)**: Sets alpha channel (0-100).
- **setHue(value)**: Sets hue (0-360).
- **setSaturation(value)**: Sets saturation (0-100).
- **setLightness(value)**: Sets lightness (0-100).
- **valueToHSL()**: Returns current value as HSL.
- **valueToHSV()**: Returns current value as HSV.
- **valueToHex()**: Returns current value as HEX.
- **valueToCmyk()**: Returns current value as CMYK.
- **setSelectedPoint(index)**: Focuses a specific gradient point.
- **deletePoint(index)**: Removes a gradient point.
- **addPoint(position)**: Adds a new color point (0-100).
- **setPointLeft(value)**: Sets position of selected point (0-100).
- **getGradientObject()**: Returns parsed gradient object.
```

--------------------------------

### Accessing Internal Utility Functions

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/QUICK-REFERENCE.md

Import and use these utilities for advanced color processing and metadata extraction.

```typescript
// Import from internal utilities (for advanced use)
import { getColors, formatInputValues, getDetails, objectToString } from 'react-best-gradient-color-picker'

getColors(value, defaultColor, defaultGradient)
formatInputValues(value, min, max)           // Clamp to range
getDetails(value)                            // Extract metadata
objectToString(value)                        // Parse to string
```

--------------------------------

### Implement Advanced Color Control with useColorPicker

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/integration-guide.md

Utilize the useColorPicker hook to access color metadata and manual adjustment methods for both solid and gradient colors.

```typescript
import React, { useState } from 'react'
import ColorPicker, { useColorPicker } from 'react-best-gradient-color-picker'

export default function App() {
  const [color, setColor] = useState('linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(0,0,255,1) 100%)')
  
  const {
    setR,
    setG,
    setB,
    setA,
    rgbaArr,
    isGradient,
    setSolid,
    setGradient,
    gradientType,
    setLinear,
    setRadial,
    valueToHex,
    valueToHSL
  } = useColorPicker(color, setColor)
  
  return (
    <div>
      <div style={{ marginBottom: '20px' }}>
        <h2>Color Info</h2>
        <p>Is Gradient: {isGradient ? 'Yes' : 'No'}</p>
        <p>Current Type: {gradientType}</p>
        <p>Hex: {valueToHex()}</p>
        <p>HSL: {valueToHSL()}</p>
        <p>RGBA: rgba({rgbaArr[0]}, {rgbaArr[1]}, {rgbaArr[2]}, {rgbaArr[3]})</p>
      </div>
      
      <div style={{ marginBottom: '20px' }}>
        <h2>Controls</h2>
        <button onClick={setSolid} style={{ marginRight: '10px' }}>Solid</button>
        <button onClick={setGradient} style={{ marginRight: '10px' }}>Gradient</button>
        {isGradient && (
          <>
            <button onClick={setLinear} style={{ marginRight: '10px' }}>Linear</button>
            <button onClick={setRadial}>Radial</button>
          </>
        )}
      </div>
      
      <div style={{ marginBottom: '20px' }}>
        <h2>Manual RGBA Control</h2>
        <label>
          R: <input type="number" min="0" max="255" value={rgbaArr[0]} onChange={(e) => setR(+e.target.value)} />
        </label>
        <label>
          G: <input type="number" min="0" max="255" value={rgbaArr[1]} onChange={(e) => setG(+e.target.value)} />
        </label>
        <label>
          B: <input type="number" min="0" max="255" value={rgbaArr[2]} onChange={(e) => setB(+e.target.value)} />
        </label>
        <label>
          A: <input type="number" min="0" max="100" value={rgbaArr[3]} onChange={(e) => setA(+e.target.value)} />
        </label>
      </div>
      
      <div>
        <h2>Picker</h2>
        <ColorPicker value={color} onChange={setColor} />
      </div>
    </div>
  )
}
```

--------------------------------

### Converting Color Formats

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/QUICK-REFERENCE.md

Utilize conversion methods provided by the useColorPicker hook to output different color formats.

```typescript
const { valueToHex, valueToHSL, valueToCmyk } = useColorPicker(color, setColor)
console.log(valueToHex())   // '#ff0000'
console.log(valueToHSL())   // 'hsl(0, 100%, 50%)'
console.log(valueToCmyk())  // 'cmyk(0, 1, 1, 0)'
```

--------------------------------

### Use useColorPicker Hook

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/README.md

Access low-level color manipulation methods for solid colors and gradients without the UI.

```typescript
const { setR, setG, setB, rgbaArr } = useColorPicker(color, setColor)
const { setLinear, setRadial, setDegrees } = useColorPicker(gradient, setGradient)
const { valueToHex, valueToHSL, valueToCmyk } = useColorPicker(color, setColor)
```

--------------------------------

### Import useColorPicker Hook

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/api-reference/use-color-picker-hook.md

Import the hook from the react-best-gradient-color-picker package.

```typescript
import { useColorPicker } from 'react-best-gradient-color-picker'
```

--------------------------------

### Hook: useColorPicker

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/QUICK-REFERENCE.md

The useColorPicker hook provides programmatic control over color state, conversions, and gradient management.

```APIDOC
## Hook: useColorPicker

### Description
A hook to manage color state and perform color conversions or gradient manipulations.

### Signature
`useColorPicker(value, onChange, config?)`

### Returned API
- **Setters**: setR, setG, setB, setA, setHue, setSaturation, setLightness
- **Converters**: valueToHex, valueToHSL, valueToHSV, valueToCmyk
- **Mode Switchers**: setSolid, setGradient
- **Gradient Controls**: setLinear, setRadial, setDegrees
- **Point Management**: setSelectedPoint, addPoint, deletePoint, setPointLeft
- **State/Utilities**: rgbaArr, hslArr, isGradient, gradientType, degrees, handleChange, getGradientObject
```

--------------------------------

### Use useColorPicker Hook

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/README.md

Provides granular control over color state and gradient properties. Accepts value, onChange, and configuration objects.

```typescript
import { useColorPicker } from 'react-best-gradient-color-picker'

const {
  setR, setG, setB, setA,
  setHue, setSaturation, setLightness,
  valueToHex, valueToHSL, valueToHSV, valueToCmyk,
  setSolid, setGradient,
  setLinear, setRadial, setDegrees,
  addPoint, deletePoint, setSelectedPoint, setPointLeft,
  // ... state properties
} = useColorPicker(value, onChange, config)
```

--------------------------------

### Import Library Types

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/EXPORTS.md

Import these types for type annotations when configuring the picker or defining custom themes and styles.

```typescript
import type {
  ColorPickerProps,
  ColorsProps,
  GradientProps,
  LocalesProps,
  ThemeProps,
  ThemeMode,
  Styles,
  PassedConfig,
  Config
} from 'react-best-gradient-color-picker'
```

--------------------------------

### Configure ColorPicker Component

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/QUICK-REFERENCE.md

Define custom sizing and default values for the ColorPicker component.

```typescript
const config = {
  barSize: 18,                    // Slider handle size (px)
  crossSize: 18,                  // Crosshair size (px)
  defaultColor: 'rgba(...)',      // Default solid color
  defaultGradient: 'linear-gradient(...)' // Default gradient
}

<ColorPicker value={color} onChange={setColor} config={config} />
```

--------------------------------

### Configure Gradient-Only Mode with Custom Locales

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/api-reference/color-picker.md

Use the locales prop to translate UI labels and hideColorTypeBtns to restrict the picker to gradient mode.

```typescript
import React, { useState } from 'react'
import ColorPicker from 'react-best-gradient-color-picker'

function App() {
  const [gradient, setGradient] = useState(
    'linear-gradient(90deg, rgba(96,93,93,1) 0%, rgba(255,255,255,1) 100%)'
  )
  
  const customLocales = {
    CONTROLS: {
      SOLID: 'Color sólido',
      GRADIENT: 'Gradiente'
    }
  }
  
  return (
    <ColorPicker
      value={gradient}
      onChange={setGradient}
      hideColorTypeBtns={true}
      locales={customLocales}
    />
  )
}
```

--------------------------------

### Importing Types in TypeScript

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/types.md

Import the necessary type definitions directly from the library's main entry point.

```typescript
import type {
  ColorPickerProps,
  ColorsProps,
  GradientProps,
  LocalesProps,
  Styles,
  PassedConfig,
  Config,
  ThemeProps,
  ThemeMode
} from 'react-best-gradient-color-picker'
```

--------------------------------

### Performing Partial Configuration Overrides

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/configuration.md

Only specify the properties you wish to override; others will fall back to built-in defaults.

```typescript
config={{
  defaultColor: 'rgba(100, 100, 100, 1)'
  // barSize and crossSize use defaults
}}
```

--------------------------------

### ColorPicker Configuration Options

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/configuration.md

The ColorPicker component supports several configuration properties passed via the 'config' object to control UI sizing and default fallback values.

```APIDOC
## ColorPicker Configuration

### barSize
- **Type**: number
- **Default**: 18
- **Description**: Controls the visual size (in pixels) of slider handles on the hue and opacity bars.

### crossSize
- **Type**: number
- **Default**: 18
- **Description**: Controls the visual size (in pixels) of the crosshair marker in the main color picker square.

### defaultColor
- **Type**: string
- **Default**: 'rgba(175, 51, 242, 1)'
- **Description**: The fallback solid color used when the 'value' prop is undefined or invalid. Must be a valid CSS color string.

### defaultGradient
- **Type**: string
- **Default**: 'linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)'
- **Description**: The fallback gradient used when switching to gradient mode without a preset. Must be a valid CSS gradient string.
```

--------------------------------

### getDetails

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/api-reference/utility-functions.md

Parses color/gradient value and extracts metadata.

```APIDOC
## getDetails(value: string)

### Description
Parses a color or gradient string and extracts metadata such as degrees, gradient type, and boolean flags.

### Parameters
- **value** (string) - Required - Color or gradient string

### Returns
- **object** - Metadata object containing degrees (number), degreeStr (string), isGradient (boolean), and gradientType (string)

### Example
```typescript
getDetails('linear-gradient(45deg, rgba(255,0,0,1) 0%, rgba(0,0,255,1) 100%)')
// Returns: { degrees: 45, degreeStr: '45deg', isGradient: true, gradientType: 'linear-gradient' }
```
```

--------------------------------

### Define ThemeProps interface

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/types.md

Defines the structure for light and dark mode theme configurations.

```typescript
type ThemeProps = {
  light: ThemeMode
  dark: ThemeMode
}
```

--------------------------------

### Configure Preset Colors in ColorPicker

Source: https://github.com/hxf31891/react-gradient-color-picker/blob/main/_autodocs/integration-guide.md

Pass an array of RGBA strings to the presets prop to display frequently used colors.

```typescript
import React, { useState } from 'react'
import ColorPicker from 'react-best-gradient-color-picker'

const BRAND_COLORS = [
  'rgba(66, 133, 244, 1)',      // Blue
  'rgba(219, 68, 55, 1)',        // Red
  'rgba(244, 180, 0, 1)',        // Orange
  'rgba(26, 137, 23, 1)',        // Green
  'rgba(102, 51, 153, 1)',       // Purple
]

export default function App() {
  const [color, setColor] = useState('rgba(66, 133, 244, 1)')
  
  return (
    <div>
      <ColorPicker
        value={color}
        onChange={setColor}
        presets={BRAND_COLORS}
      />
    </div>
  )
}
```