### Install react-color via npm

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/02.01-install.md

Installs the react-color library and saves it as a dependency in your project's package.json file.

```bash
npm install react-color --save
```

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

### Install React Color

Source: https://github.com/casesandberg/react-color/blob/master/README.md

Installs the react-color package using npm. This is the first step to integrate the color picker into your React application.

```bash
npm install react-color --save
```

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

### Import and Use SketchPicker

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/02.02-include.md

Imports the SketchPicker component from 'react-color' and renders it within a React component. This is a basic example of integrating a color picker.

```javascript
import React from 'react';
import { SketchPicker } from 'react-color';

class Component extends React.Component {

  render() {
    return <SketchPicker />;
  }
}
```

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

### Include SketchPicker Component

Source: https://github.com/casesandberg/react-color/blob/master/README.md

Demonstrates how to import and use the SketchPicker component from the react-color library within a React class component. This is a basic example of rendering a color picker.

```javascript
import React from 'react'
import { SketchPicker } from 'react-color'

class Component extends React.Component {

  render() {
    return <SketchPicker />
  }
}
```

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

### ReactColor Component API

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/03-api.md

This section details the API for the various color picker components provided by the react-color library. It covers common props, specific component props, and usage examples.

```APIDOC
ReactColor Components API:

Common Props:
  - 
    `onChange`: Function to call when the color changes. Receives the color object as an argument.
    `onSwatchHover`: Function to call when hovering over a swatch. Receives the color object as an argument.
    `color`: The current color value. Can be a string (e.g., '#fff', 'rgba(0,0,0,0.5)') or an object (e.g., { hex: '#fff', rgb: { r: 255, g: 255, b: 255, a: 1 } }).
    `displayColorPicker`: Boolean to control the visibility of the color picker.
    `disableAlpha`: Boolean to disable the alpha channel slider.
    `renderers`: An object containing custom renderers for different parts of the picker (e.g., saturation, hue).
    `styles`: An object to override default component styles.
    `className`: Custom CSS class for the component.
    `id`: Custom ID for the component.

Specific Component Props:

SketchPicker:
  - 
    `presetColors`: Array of preset color strings to display.
    `width`: Width of the picker.
    `height`: Height of the picker.

ChromePicker:
  - 
    `circleSize`: Size of the color circle.
    `circleSpacing`: Spacing between color circles.
    `disableAlpha`: Disables the alpha channel.

SwatchesPicker:
  - 
    `colors`: Array of color objects or strings to display as swatches.
    `height`: Height of the swatch grid.
    `width`: Width of the swatch grid.
    `charLimit`: Character limit for swatch labels.

SaturationRect:
  - 
    `hsv`: Current HSV color value.
    `onChange`: Function to call when saturation changes.

HueRect:
  - 
    `hsv`: Current HSV color value.
    `onChange`: Function to call when hue changes.

AlphaRect:
  - 
    `rgb`: Current RGB color value.
    `hsl`: Current HSL color value.
    `onChange`: Function to call when alpha changes.

ColorWrap:
  - 
    `children`: The component to wrap.
    `defaultColor`: The initial color value.
    `onBlur`: Function to call when the component loses focus.

Example Usage:
```jsx
import React, { useState } from 'react';
import { SketchPicker } from 'react-color';

function MyColorPicker() {
  const [color, setColor] = useState('#fff');

  return (
    <SketchPicker
      color={color}
      onChangeComplete={updatedColor => setColor(updatedColor.hex)}
    />
  );
}
```

Related Components:
  - ChromePicker
  - SwatchesPicker
  - TwitterPicker
  - GithubPicker
  - HuePicker
  - AlphaPicker
  - SaturationPicker
  - SliderPicker
  - CompactPicker

```

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

### onChangeComplete Prop Example

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/03.03-onChangeComplete.md

Demonstrates how to use the `onChangeComplete` prop to handle color changes in the PhotoshopPicker component. This function is called when a color selection is finalized, updating the component's state with the new color.

```javascript
import React from 'react';
import { PhotoshopPicker } from 'react-color';

class Component extends React.Component {
  state = {
    background: '#fff',
  };

  handleChangeComplete = (color, event) => {
    this.setState({ background: color.hex });
  };

  render() {
    return <PhotoshopPicker onChangeComplete={ this.handleChangeComplete } />;
  }
}
```

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

### Create Custom Color Picker Component

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/04.01-parent.md

This snippet shows how to create a parent component for a custom color picker using the `CustomPicker` higher-order component from `react-color`. The `MyColorPicker` component receives color values (hex, rgb, hsl) as props and can propagate color changes via the `onChange` prop.

```javascript
import React from 'react';
import { CustomPicker } from 'react-color';

class MyColorPicker extends React.Component {
  render() {
    return <div>MyColorPicker</div>;
  }
}

export default CustomPicker(MyColorPicker);
```

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

### Initializing and Controlling Color

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/03.01-color.md

Demonstrates how to use the 'color' prop to set the initial color of a SketchPicker and how to update the state with the new color upon completion of a change.

```javascript
import React from 'react';
import { SketchPicker } from 'react-color';

class Component extends React.Component {
  state = {
    background: '#fff',
  };

  handleChangeComplete = (color) => {
    this.setState({ background: color.hex });
  };

  render() {
    return (
      <SketchPicker
        color={ this.state.background }
        onChangeComplete={ this.handleChangeComplete }
      />
    );
  }
}
```

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

### Root Element Styling

Source: https://github.com/casesandberg/react-color/blob/master/examples/basic-toggle-open-closed/public/index.html

Styles applied to the root HTML element to ensure proper layout and appearance. This includes setting the font family, height, width, and using flexbox for centering content.

```css
#root {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
```

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

### Root Element Styling

Source: https://github.com/casesandberg/react-color/blob/master/examples/with-portals/public/index.html

Styles applied to the root HTML element to ensure proper layout and appearance. This includes setting the font family, height, width, and using flexbox for centering content.

```css
#root {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
```

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

### Root Element Styling

Source: https://github.com/casesandberg/react-color/blob/master/examples/basic-positioning/public/index.html

Styles applied to the root HTML element to ensure proper layout and appearance. This includes setting the font family, height, width, and using flexbox for centering content.

```css
#root {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
```

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

### Root Element Styling

Source: https://github.com/casesandberg/react-color/blob/master/examples/basic/public/index.html

Styles applied to the root HTML element to ensure proper layout and appearance. This includes setting the font family, height, width, and using flexbox for centering content.

```css
#root {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
```

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

### Root Element Styling

Source: https://github.com/casesandberg/react-color/blob/master/examples/with-redux/public/index.html

Styles applied to the root HTML element to ensure proper layout and appearance. This includes setting the font family, height, width, and using flexbox for centering content.

```css
#root {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
```

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

### Root Element Styling

Source: https://github.com/casesandberg/react-color/blob/master/examples/custom-pointer/public/index.html

Styles applied to the root HTML element to ensure proper layout and appearance. This includes setting the font family, height, width, and using flexbox for centering content.

```css
#root {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
```

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

### Github Picker API

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/03.04-individual.md

Props for the Github color picker component. Configurable width, a set of predefined colors, and triangle position. Includes an onSwatchHover event handler.

```APIDOC
Github:
  width: String (Pixel value for picker width. Default `200px`)
  colors: Array of Strings (Color squares to display. Default `['#B80000', '#DB3E00', '#FCCB00', '#008B02', '#006B76', '#1273DE', '#004DCF', '#5300EB', '#EB9694', '#FAD0C3', '#FEF3BD', '#C1E1C5', '#BEDADC', '#C4DEF6', '#BED3F3', '#D4C4FB']`)
  triangle: String (Either `hide`, `top-left` or `top-right`. Default `top-left`)
  onSwatchHover: Function (An event handler for `onMouseOver` on the `<Swatch>`s within this component. Gives the args `(color, event)`)
```

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

### Import Individual Pickers

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/02.02-include.md

Shows how to import specific color picker components individually from their respective paths within the 'react-color' library. This method helps in optimizing the final bundle size by only including the necessary components.

```javascript
import SketchPicker from 'react-color/lib/Sketch';
import ChromePicker from 'react-color/lib/Chrome';
```

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

### Compact Picker API

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/03.04-individual.md

Props for the Compact color picker component. Displays a predefined set of colors and includes an onSwatchHover event handler.

```APIDOC
Compact:
  colors: Array of Strings (Color squares to display. Default `['#4D4D4D', '#999999', '#FFFFFF', '#F44E3B', '#FE9200', '#FCDC00', '#DBDF00', '#A4DD00', '#68CCCA', '#73D8FF', '#AEA1FF', '#FDA1FF', '#333333', '#808080', '#cccccc', '#D33115', '#E27300', '#FCC400', '#B0BC00', '#68BC00', '#16A5A5', '#009CE0', '#7B64FF', '#FA28FF', '#000000', '#666666', '#B3B3B3', '#9F0500', '#C45100', '#FB9E00', '#808900', '#194D33', '#0C797D', '#0062B1', '#653294', '#AB149E']`)
  onSwatchHover: Function (An event handler for `onMouseOver` on the `<Swatch>`s within this component. Gives the args `(color, event)`)
```

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

### onChangeComplete API Reference

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/03.03-onChangeComplete.md

The `onChangeComplete` prop accepts a function that is executed when a color change is finalized. It receives the selected color object and the event object as arguments. This is useful for performing actions after a user has finished selecting a color.

```APIDOC
onChangeComplete(color: object, event: object) => void
  - Description: Callback function invoked when a color change is completed.
  - Parameters:
    - color: An object containing the selected color properties (e.g., hex, rgb, hsl).
    - event: The event object associated with the color change.
  - Usage:
    Used to update application state or trigger side effects after a color selection.
```

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

### Swatches Picker API

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/03.04-individual.md

Props for the Swatches color picker component. Configurable width and height, and an array of color groups. Includes an onSwatchHover event handler.

```APIDOC
Swatches:
  width: Number (Pixel value for picker width. Default `320`)
  height: Number (Pixel value for picker height. Default `240`)
  colors: Array of Arrays of Strings (An array of color groups, each with an array of colors)
  onSwatchHover: Function (An event handler for `onMouseOver` on the `<Swatch>`s within this component. Gives the args `(color, event)`)
```

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

### Color Prop Specification

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/03.01-color.md

Details the accepted formats for the 'color' prop, including hex strings, RGB/HSL objects with optional alpha, and the 'transparent' keyword.

```APIDOC
Color Prop:
  Description: Controls the active color of the color picker. Can be used to initialize the picker or sync with parent component state.
  Accepted Formats:
    - String: Hex color, e.g., '#333'
    - Object: RGB or HSL values, e.g., { r: 51, g: 51, b: 51 } or { h: 0, s: 0, l: .10 }
      - Alpha support: RGB/HSL objects can include an 'a' value for alpha, e.g., { r: 51, g: 51, b: 51, a: 1 }
    - Keyword: 'transparent'
  Example Usage:
    <SketchPicker color="#ff0000" />
    <SketchPicker color={{ r: 255, g: 0, b: 0, a: 0.5 }} />
    <SketchPicker color="transparent" />
```

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

### Saturation Block Component

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/04.02-helpers.md

Saturation is a component that displays a block for users to drag and change the saturation value of a color. It requires a parent div with `position: relative`. Props include passing down color props, a custom pointer, and an onChange callback.

```javascript
var { Saturation } = require('react-color/lib/components/common');

<Saturation
  {...this.props}
  pointer={ CustomPointer }
  onChange={ this.handleChange }  />
```

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

### Photoshop Picker API

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/03.04-individual.md

Props for the Photoshop color picker component. Includes header text customization and callbacks for accept and cancel actions.

```APIDOC
Photoshop:
  header: String (Title text. Default `Color Picker`)
  onAccept: Function (Callback for when accept is clicked.)
  onCancel: Function (Callback for when cancel is clicked.)
```

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

### Root Element Styling

Source: https://github.com/casesandberg/react-color/blob/master/examples/custom-picker/public/index.html

Styles the root HTML element to center its content both vertically and horizontally, using system fonts for a clean appearance.

```css
#root {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
```

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

### Circle Picker API

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/03.04-individual.md

Props for the Circle color picker component. Configurable width, circle size, spacing, and a predefined list of colors. Includes an onSwatchHover event handler.

```APIDOC
Circle:
  width: String (Pixel value for picker width. Default `252px`)
  colors: Array of Strings (Color squares to display. Default `["#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4caf50", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107", "#ff9800", "#ff5722", "#795548", "#607d8b"]`)
  circleSize: Number (Value for circle size. Default `28`)
  circleSpacing: Number (Value for spacing between circles. Default `14`)
  onSwatchHover: Function (An event handler for `onMouseOver` on the `<Swatch>`s within this component. Gives the args `(color, event)`)
```

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

### Checkboard Background Component

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/04.02-helpers.md

The Checkboard component renders a checkerboard pattern for backgrounds, useful for gradients or alpha transparency. It requires a parent div with `position: relative`. Customizable props include square size, white square color, and grey square color.

```javascript
var { Checkboard } = require('react-color/lib/components/common');

<Checkboard
  size={ 12 }
  white="#fff"
  grey="#333"  />
```

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

### Block Picker API

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/03.04-individual.md

Props for the Block color picker component. Allows setting width, an array of colors to display, and controlling the triangle position. Includes an onSwatchHover event handler.

```APIDOC
Block:
  width: String (Pixel value for picker width. Default `170px`)
  colors: Array of Strings (Color squares to display. Default `['#D9E3F0', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555', '#dce775', '#ff8a65', '#ba68c8']`)
  triangle: String (Either `hide` or `top`. Default `top`)
  onSwatchHover: Function (An event handler for `onMouseOver` on the `<Swatch>`s within this component. Gives the args `(color, event)`)
```

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

### Google Analytics Initialization

Source: https://github.com/casesandberg/react-color/blob/master/docs/index.html

This snippet initializes Google Analytics for tracking page views. It's a common pattern for web applications to integrate analytics.

```javascript
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-66334162-1', 'auto'); ga('send', 'pageview');
```

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

### onChange Event Handler

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/03.02-onChange.md

The `onChange` prop accepts a function that is called every time the color changes, typically during drag events. This is useful for updating parent component state or performing transformations in real-time. It's important to note that this handler can be called frequently. For single-event color retrieval, `onChangeComplete` should be used instead. The callback receives a `color` object containing `hex`, `rgb`, and `hsl` representations of the selected color, along with the original `event` object.

```javascript
import React from 'react';
import { SwatchesPicker } from 'react-color';

class Component extends React.Component {

  handleChange(color, event) {
    // color = {
    //   hex: '#333',
    //   rgb: {
    //     r: 51,
    //     g: 51,
    //     b: 51,
    //     a: 1,
    //   },
    //   hsl: {
    //     h: 0,
    //     s: 0,
    //     l: .20,
    //     a: 1,
    //   },
    // }
    console.log('Color changed:', color);
  }

  render() {
    return <SwatchesPicker onChange={ this.handleChange } />;
  }
}
```

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

### Hue Picker API

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/03.04-individual.md

Props for the Hue color picker component. Supports custom width, height, direction, and custom pointer components.

```APIDOC
Hue:
  width: String (Pixel value for picker width. Default `316px`)
  height: String (Pixel value for picker height. Default `16px`)
  direction: String Enum (`horizontal` or `vertical`. Default `horizontal`)
  pointer: React Component (Custom pointer component)
```

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

### Twitter Component Props

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/03.04-individual.md

Defines the properties available for the Twitter color picker component. This includes width, an array of colors to display, the triangle position, and an event handler for swatch hovers.

```javascript
TwitterPicker.propTypes = {
  width: PropTypes.string,
  colors: PropTypes.arrayOf(PropTypes.string),
  triangle: PropTypes.oneOf(['hide', 'top-left', 'top-right']),
  onSwatchHover: PropTypes.func
};

TwitterPicker.defaultProps = {
  width: '276px',
  colors: [
    '#FF6900',
    '#FCB900',
    '#7BDCB5',
    '#00D084',
    '#8ED1FC',
    '#0693E3',
    '#ABB8C3',
    '#EB144C',
    '#F78DA7',
    '#9900EF'
  ],
  triangle: 'top-left',
  onSwatchHover: null
};
```

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

### Sketch Picker API

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/03.04-individual.md

Props for the Sketch color picker component. Allows disabling alpha, setting preset colors (as strings or objects), width, renderers for SSR, and an onSwatchHover event handler.

```APIDOC
Sketch:
  disableAlpha: Bool (Remove alpha slider and options from picker. Default `false`)
  presetColors: Array of Strings or Objects (Hex strings for default colors at bottom of picker. Default `['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF']`. Can also be an array of objects with `color` and `title` properties, or a combination.)
  width: Number (Width of picker. Default `200`)
  renderers: Object (Use { canvas: Canvas } with node canvas to do SSR)
  onSwatchHover: Function (An event handler for `onMouseOver` on the `<Swatch>`s within this component. Gives the args `(color, event)`)
```

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

### react-color API - Custom Styles

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/03.05-customStyles.md

Provides an overview of the `styles` prop available in react-color components. This prop allows users to inject custom CSS properties to override the default inline styles applied by the library. The structure of the `styles` object typically mirrors the component's internal styling hierarchy.

```APIDOC
Component Styles Prop:

Applies to various react-color components (e.g., SketchPicker, ChromePicker).

Prop:
  styles: object
    Description: An object containing custom CSS properties to override the component's default inline styles. The structure of this object should match the component's internal style keys.
    Example:
      const customStyles = {
        default: {
          picker: {
            backgroundColor: '#f00',
            boxShadow: '0 0 10px rgba(0,0,0,0.3)'
          }
        }
      }
    Usage:
      <SketchPicker styles={customStyles} />

Notes:
  - Refer to the specific component's source code for the exact style keys available for customization.
  - Overrides are applied directly to the corresponding DOM elements.
```

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

### Editable Input Component

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/04.02-helpers.md

EditableInput provides an input field with a label that acts as the single source of truth until blurred. It accepts a label, value, onChange callback, and style object for customization. The onChange callback returns an object with the label and new value.

```javascript
var { EditableInput } = require('react-color/lib/components/common');

var inputStyles = {
  input: {
    border: none,
  },
  label: {
    fontSize: '12px',
    color: '#999',
  },
};

<EditableInput
  style={ inputStyles }
  label="hex"
  value={ this.props.hex }
  onChange={ this.handleChange } />
```

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

### Slider Picker API

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/03.04-individual.md

Props for the Slider color picker component. Allows for a custom pointer component.

```APIDOC
Slider:
  pointer: React Component (Custom pointer component)
```

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

### Alpha Picker API

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/03.04-individual.md

Props for the Alpha color picker component. Supports custom width, height, direction, renderers for SSR, and custom pointer components.

```APIDOC
Alpha:
  width: String (Pixel value for picker width. Default `316px`)
  height: String (Pixel value for picker height. Default `16px`)
  direction: String Enum (`horizontal` or `vertical`. Default `horizontal`)
  renderers: Object (Use { canvas: Canvas } with node canvas to do SSR)
  pointer: React Component (Custom pointer component)
```

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

### Customizing SketchPicker Styles

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/03.05-customStyles.md

Demonstrates how to pass a `styles` object to the SketchPicker component to override its default inline styles. The `styles` object should mirror the structure of the component's internal styles, allowing for granular control over appearance.

```javascript
import React from 'react'
import { SketchPicker } from 'react-color'

const sketchPickerStyles = {
  default: {
    picker: { // See the individual picker source for which keys to use
      boxShadow: 'none',
    },
  },
}

export default class Component extends React.Component {
  render() {
    return (
      <SketchPicker styles={sketchPickerStyles} />
    )
  }
}
```

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

### Chrome Picker API

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/03.04-individual.md

Props for the Chrome color picker component. Supports disabling the alpha slider and options, and configuring renderers for SSR.

```APIDOC
Chrome:
  disableAlpha: Bool (Remove alpha slider and options from picker. Default `false`)
  renderers: Object (Use { canvas: Canvas } with node canvas to do SSR)
```

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

### Hue Slider Component

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/04.02-helpers.md

The Hue component renders a slider for adjusting the hue value of a color. Similar to Alpha, it needs a parent div with `position: relative`. It supports passing down color props, a custom pointer, an onChange callback, and a direction prop for horizontal or vertical display.

```javascript
var { Hue } = require('react-color/lib/components/common');

<Hue
  {...this.props}
  pointer={ CustomPointer }
  onChange={ this.handleChange }
  direction={ 'horizontal' || 'vertical' } />
```

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

### Alpha Slider Component

Source: https://github.com/casesandberg/react-color/blob/master/docs/documentation/04.02-helpers.md

The Alpha component displays a slider for toggling the alpha value of a color. It requires a parent div with `position: relative`. Key props include passing down color props, a custom pointer component, and an onChange callback.

```javascript
var { Alpha } = require('react-color/lib/components/common');

<Alpha
  {...this.props}
  pointer={ CustomPointer }
  onChange={ this.handleChange } />
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.