Igloo branding

ColorPicker

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

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

PropTypeDescription
classNamestringAdd a specific class to the color picker
dataTeststringAdd a data-test tag for automated tests
disabledbooleanDisables the color picker
onSelect(color: "dandelion200" | "dandelion400" | "creamsicle150" | "creamsicle200" | "coral200" | "coral300" | "strawberryFields200" | "coral800" | "seaweed300" | "sky100" | "sky200" | "electricBlue200" | "electricBlue400" | "electricBlue700") => voidCallback when a color is selected
selectedColor"dandelion200" | "dandelion400" | "creamsicle150" | "creamsicle200" | "coral200" | "coral300" | "strawberryFields200" | "coral800" | "seaweed300" | "sky100" | "sky200" | "electricBlue200" | "electricBlue400" | "electricBlue700"The selected color

ColorPickerOption

PropTypeDescription
colorstringThe background color
iconReactElement<any, string | JSXElementConstructor<any>>Add an icon in the center of the color
idstringAdd a specific id to the color picker option
sizeSizeSpecify a size for the color