# Install from NPM

$ npm install @jaames/iro --save

Then if you are using a module bundler like Webpack or Rollup, import iro.js into your project:

import iro from '@jaames/iro' ; const iro = require ( '@jaames/iro' ) ;

# Or use the jsDelivr CDN

Drop this script into the <head> of your page's HTML:

< script src = " https://cdn.jsdelivr.net/npm/@jaames/iro@5 " > </ script >

When you manually include the library like this, iro.js will be made globally available on window.iro .

# Or download and host yourself

Development version

Uncompressed, with source comments included. Intended for debugging.

Production version

Minified and optimized version.

# Color Picker Setup

First, we need a HTML element with a unique identifier (such as an id attribute) to act as a container for the color picker:

< div id = " picker " > </ div >

Then use JavaScript to create a new iro.ColorPicker with a CSS selector that matches your chosen container element:

var colorPicker = new iro . ColorPicker ( '#picker' ) ;

You can also use a DOM object instead of a CSS selector here -- this might be more suitable if you're integrating iro.js into an application built with a framework such as Vue, React, etc.

# Color Picker Options

The color picker can be customized by passing a set of options to the second iro.ColorPicker parameter:

var colorPicker = new iro . ColorPicker ( "#picker" , { width : 320 , color : "#f00" } ) ;

A full list of color picker options can be found in the options documentation.

# Working with Colors

Each color picker has a color object which stores the currently selected color.

var hex = colorPicker . color . hexString ; console . log ( hex ) ;

Whenever you set any of these color properties, the color picker will automatically update to match it!

colorPicker . color . hsl = { h : 180 , s : 100 , l : 50 } ;

A full list of color properties can be found in the color documentation.

Events let you to run your own code after certain things have happened, like when the selected color has changed or when the user has interacted with the color picker.

The color picker's on method can be used to attach functions that will be called whenever a particular event is fired. For example, we can add a listener that fires whenever the color is changed:

colorPicker . on ( 'color:change' , function ( color ) { console . log ( color . hexString ) ; } ) ;

For a full overview of the available events can be found in the events documentation.