# React Iro - A React Wrapper for iro.js

React Iro is an UNOFFICIAL open-source library that provides a React wrapper for iro.js, a versatile color picker library. With React Iro, you can easily integrate an interactive color picker into your React applications, allowing users to select colors for various elements and purposes.

## Installation

You can install React Iro using npm:

```bash
npm install react-iro
```

## Usage

To use React Iro in your React application, follow these steps:

1. Import the component:

```jsx
import { ColorPicker } from "react-iro"
import iro from "@jaames/iro"
```

2. Use the component with options and setters:

```jsx
import { useState } from "react"
import { ColorPicker } from "react-iro"
import iro from "@jaames/iro"

function App() {
  const [color, setColor] = useState("#ff0000")

  return (
    <ColorPicker
      options={{
        width: 200,
        color: color,
      }}
      setters={{
        onChangeColor: (newColor) => {
          setColor(newColor.hexString)
        }
      }}
    />
  )
}
```

You can find all available options in the [iro.js documentation](https://iro.js.org).

## Props

React Iro accepts the following props:

- **`options`** (required): An object containing iro.js configuration options:
  - `width?: number` - Width of the color picker (default: 300)
  - `height?: number` - Height of the color picker
  - `color?: string` - Initial color value (hex, rgb, hsl)
  - `colors?: iro.Color[]` - Array of colors for multi-color picker
  - `padding?: number` - Padding around the color picker
  - `layoutDirection?: 'vertical' | 'horizontal'` - Layout direction
  - `borderColor?: string` - Border color
  - `borderWidth?: number` - Border width
  - `handleRadius?: number` - Handle radius
  - `handleSvg?: string` - Custom SVG handle selector
  - `wheelLightness?: boolean` - Show lightness on wheel
  - `wheelAngle?: number` - Starting angle of the wheel
  - `sliderSize?: number` - Size of slider components
  - `layout?: array` - Custom layout configuration
  - See [iro.js documentation](https://iro.js.org/guide.html#color-picker-options) for all options

- **`setters`** (required): An object containing event handlers:
  - `onChangeColor: (color: iro.Color) => void` - Called when the color changes
    - The `color` parameter provides methods like:
      - `color.hexString` - Get hex color (e.g., "#ff0000")
      - `color.rgbString` - Get RGB color (e.g., "rgb(255, 0, 0)")
      - `color.hslString` - Get HSL color (e.g., "hsl(0, 100%, 50%)")
      - `color.rgbaString` - Get RGBA color with alpha
      - See [iro.Color API](https://iro.js.org/guide.html#color-api) for more

## Example

Here's a complete example of how to use React Iro with custom handle and layout:

```tsx
import { useState } from "react"
import { ColorPicker } from "react-iro"
import iro from "@jaames/iro"

const Example = () => {
    const [color, setColor] = useState("#f1be51")

    return (
        <div>
            {/* Custom SVG handle definition */}
            <svg style={{ display: "none" }}>
                <defs>
                    <g id="handle">
                        <circle 
                            cx="50%" 
                            cy="50%" 
                            r="10" 
                            stroke="#004175" 
                            strokeWidth="3" 
                            fill="transparent" 
                        />
                    </g>
                </defs>
            </svg>

            <ColorPicker
                options={{
                    color: color,
                    width: 300,
                    height: 300,
                    wheelLightness: false,
                    layoutDirection: "horizontal",
                    handleSvg: "#handle",
                    layout: [
                        {
                            component: iro.ui.Wheel,
                            options: {}
                        },
                        {
                            component: iro.ui.Slider,
                            options: {
                                sliderType: 'hue'
                            }
                        }
                    ],
                }}
                setters={{
                    onChangeColor: (newColor) => {
                        setColor(newColor.hexString)
                        console.log("Color changed to:", newColor.hexString)
                    },
                }}
            />

            <div style={{ marginTop: 20 }}>
                <p>Selected Color: {color}</p>
                <div 
                    style={{ 
                        width: 100, 
                        height: 100, 
                        backgroundColor: color,
                        border: "1px solid #ccc"
                    }} 
                />
            </div>
        </div>
    )
}

export default Example
```

### Simple Example

For a basic color picker without customization:

```tsx
import { useState } from "react"
import { ColorPicker } from "react-iro"

function SimpleExample() {
  const [color, setColor] = useState("#ff0000")

  return (
    <div>
      <ColorPicker
        options={{ 
          color: color,
          width: 250 
        }}
        setters={{
          onChangeColor: (c) => setColor(c.hexString)
        }}
      />
      <p>Current color: {color}</p>
    </div>
  )
}
```

## License

React Iro is open-source and licensed under the [MIT License](https://opensource.org/licenses/MIT).

## Acknowledgments

React Iro is based on the powerful [iro.js](https://iro.js.org) library, and we extend our gratitude to the [iro.js](https://iro.js.org) team for providing such a fantastic color picker solution.