@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.