Quick nav

ColorPicker

Color pickers allow users to assign a color to a given element.

Version 1.0.7

Installation

To install @igloo-ui/color-picker in your project, you will need to run the following command using npm:

npm install @igloo-ui/color-picker

If you prefer Yarn, use the following command instead:

yarn add @igloo-ui/color-picker

Usage

Then to use the component in your code just import it!

import ColorPicker from '@igloo-ui/color-picker';

const [selectedColor, setSelectedColor] = React.useState("dandelion200");

<ColorPicker 
    onSelect={
        (color) => {
            setSelectedColor(color);
        }          
    } 
    selectedColor={selectedColor} 
/>

API

ColorPicker

Prop	Type	Default	Description
`className`	string	-	Add a specific class to the color picker
`dataTest`	string	-	Add a data-test tag for automated tests
`disabled`	boolean		Disables the color picker
`onSelect`	(color: ColorName) => void	-	Callback when a color is selected
`selectedColor`	ColorName	-	The selected color

ColorPickerOption

Prop	Type	Default	Description
`color`	string	-	The background color
`hoverColor`	string	-	The background hover color of the Color component
`icon`	ReactElement<any, string \| JSXElementConstructor<any>>	-	Add an icon in the center of the color
`iconColor`	string	-	The icon color
`id`	string	-	Add a specific id to the color picker option
`size`	Size		Specify a size for the color