@highlight-ui/color-picker NPM | npm.io

4.3.6 • Published 1 year ago

Install

Weekly downloads

-

License

MIT

Repository

Last release

1 year ago

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

@highlight-ui/icon @highlight-ui/panel @highlight-ui/tokens @highlight-ui/typography @highlight-ui/utils-commons

@infinitebrahmanuniverse/nolb-_hig @everything-registry/sub-chunk-395 @highlight-ui/select @highlight-ui/sandbox-multiselect-tag @highlight-ui/sandbox-searchable-sub-label-select @highlight-ui/sandbox-select-low-domy @zalastax/nolb-_hig

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago