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