@highlight-ui/color-picker

@highlight-ui/color-picker

Installation

Using npm:

npm install @highlight-ui/color-picker

Using yarn:

yarn add @highlight-ui/color-picker

Using pnpm:

pnpm install @highlight-ui/color-picker

In your (S)CSS file:

@import url('@highlight-ui/color-picker');

Once the package is installed, you can import the library:

import { ColorPicker } from '@highlight-ui/color-picker';

Usage

import React, { useState } from 'react';
import { ColorPicker } from '@highlight-ui/color-picker';

export default function ColorPickerExample() {
  return (
    <ColorPicker
      title="Pick a color"
      closeOnSelect
      palette="main"
      onChange={callback(action('Selected a color'), '(_: string) => void')}
    />
  );
}

Props 📜

Prop	Type	Required	Default	Description
title	string	Yes		Sets the title text on the color picker
palette	'main', 'pastel	No	main	Sets the selectable color palette
initialColor	string	No		Sets the "selected" color on the button
closeOnSelect	boolean	No	false	If true, closes picker when a color is selected
disabled	boolean	No	false	Sets a disabled state on the button
onChange	(_: string) => void	No		Callback fired once a color is selected, parameter is a hex value

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.