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:

npm install react-iro

Usage

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

1. Import the component:

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

2. Use the component with options and setters:

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.

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 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 for more

Example

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

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:

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.

Acknowledgments

React Iro is based on the powerful iro.js library, and we extend our gratitude to the iro.js team for providing such a fantastic color picker solution.