Developer ColorPicker
Widget for selecting the color.
jsx
import ColorPicker from 'intergalactic/color-picker';
<ColorPicker />;import ColorPicker from 'intergalactic/color-picker';
<ColorPicker />;ColorPickerProps
& {...}| Name | Type | Description |
|---|---|---|
| value | string | null | Selected color item. Should be used with `onChange` property together |
| onChange | (value: string, event: React.ChangeEvent) => void | Fired when user selects color item. Should be used with `value` property together |
| defaultValue | string | null | Default value if `value` property is not provided |
| colors | string[] | Array of color items. Should be used with `onColorsChange` property together |
| onColorsChange | (value: string[], event: React.ChangeEvent) => void | Fired when user changes color items. Should be used with `colors` property together |
| displayLabel | boolean | Shows label `A` as text color icon inside all color items |
ColorPicker.Trigger
The wrap over the <Dropdown.Trigger/> component.
jsx
import ColorPicker from 'intergalactic/color-picker';
<ColorPicker.Trigger />;import ColorPicker from 'intergalactic/color-picker';
<ColorPicker.Trigger />;ColorPicker.Popper
The wrap over the <Dropdown.Popper/> component.
jsx
import ColorPicker from 'intergalactic/color-picker';
<ColorPicker.Popper />;import ColorPicker from 'intergalactic/color-picker';
<ColorPicker.Popper />;ColorPicker.Colors
Group of ColorPicker.Items.
jsx
import ColorPicker from 'intergalactic/color-picker';
<ColorPicker.Colors />;import ColorPicker from 'intergalactic/color-picker';
<ColorPicker.Colors />;ColorsProps
& {...}| Name | Type | Description |
|---|---|---|
| colors | string[] | Array of color items |
ColorPicker.Item
One unit of <ColorPicker.Colors />. ColorPicker.Item is a swatch preview that allows a user to see what color is currently selected.
jsx
import ColorPicker from 'intergalactic/color-picker';
<ColorPicker.Item />;import ColorPicker from 'intergalactic/color-picker';
<ColorPicker.Item />;ItemProps
& {...}| Name | Type | Description |
|---|---|---|
| value | string | Color item in hexadecimal format. |
| displayLabel | boolean | Shows label `A` as text color icon inside all color items |
| editable | boolean | Property enabling the ability to remove a color item on click |
| selected | boolean | Shows if color item is selected |
| onRemove | React.MouseEventHandler | Fired with color item when user clicks on the close icon |
PaletteManager
Part of ColorPicker that provides the ability to add and remove custom colors to the palette.
jsx
import { PaletteManager } from 'intergalactic/color-picker';
<PaletteManager />;import { PaletteManager } from 'intergalactic/color-picker';
<PaletteManager />;PaletteManagerProps
& {...}| Name | Type | Description |
|---|---|---|
| colors | string[] | Array of color items. Should be used with `onColorsChange` property together |
| defaultColors | string[] | Default value if `colors` property is not provided |
| onColorsChange | (value: string[], event: React.ChangeEvent) => void | Fired when user adds or removes color items. Should be used with `colors` property together |
PaletteManager.Colors
Group of PaletteManager.Items.
jsx
import { PaletteManager } from 'intergalactic/color-picker';
<PaletteManager.Colors />;import { PaletteManager } from 'intergalactic/color-picker';
<PaletteManager.Colors />;ColorsCustomProps
& & {...}| Name | Type | Description |
|---|---|---|
| onPlusButtonClick | React.MouseEventHandler | Fired when user clicks on the plus icon in Palette Manager - focuses the input component |
PaletteManager.Item
One unit of <PaletteManager.Colors />. PaletteManager.Item is a swatch preview that allows a user to see what color is currently selected.
jsx
import { PaletteManager } from 'intergalactic/color-picker';
<PaletteManager.Item />;import { PaletteManager } from 'intergalactic/color-picker';
<PaletteManager.Item />;ItemProps
& {...}| Name | Type | Description |
|---|---|---|
| value | string | Color item in hexadecimal format. |
| displayLabel | boolean | Shows label `A` as text color icon inside all color items |
| editable | boolean | Property enabling the ability to remove a color item on click |
| selected | boolean | Shows if color item is selected |
| onRemove | React.MouseEventHandler | Fired with color item when user clicks on the close icon |
ColorPicker.InputColor
Input for adding colors in hexadecimal format.
jsx
import { PaletteManager } from 'intergalactic/color-picker';
<PaletteManager.InputColor />;import { PaletteManager } from 'intergalactic/color-picker';
<PaletteManager.InputColor />;InputColorProps
& {...}| Name | Type | Description |
|---|---|---|
| value | string | Text value of input |
| defaultValue | string | null | Default value if `value` property is not provided |
| state | "normal" | "valid" | "invalid" | Uncontrolled visual state of input |
| colors | string[] | Array of color items |
| onAdd | (value: string, event: React.MouseEvent | React.KeyboardEvent) => void | Fired with entered value when user clicks on the check icon or hits `Enter` or `Space` |