@highlight-ui/color-picker
v4.3.8
Published
This is the color picker component used in Personio
Downloads
7,480
Maintainers
Keywords
Readme
@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.