## Feature Examples
### Structure
- description: The component consists of a color spectrum canvas, an input area, and a `children` area. Set the initial color using the `value` prop. The `children` area accepts any content, typically used for color swatches.
- example:
```jsx
Any required content
;
```
### Removing padding
- description: By default, the component includes padding designed for popover use. Remove the padding to embed the color picker inside other layouts, such as modals, panels, or cards, by setting the `removePadding` prop to true.
- example:
```jsx
;
```
### Color converter
- description: Enables to view and edit color codes in HEX/RGB/HSB formats. Converter is visible by default and can be hidden on demand by setting the `showConverter` to false.
- example:
```jsx
;
```
### Hide bottom actions
- description: Bottom actions are shown by default. To hide them for specific use cases, set the `showActionButtons` prop to false.
- example:
```jsx
;
```
### Color dropper
- description: Enable the eye dropper tool using the `showEyeDropper` prop. When used together with the color converter, the eye dropper appears next to it. If `showConverter` is false, the eye dropper displays inline with the input area. Use `eyeDropperLabel` prop to customize the eye dropper button label if needed.
- example:
```jsx
;
```
### Hide color value input
- description: To restrict color selection to visual picking only, hide the color value input by setting `showInput` to false. The `showConverter` prop must also be set to false.
- example:
```jsx
;
```
### History bar
- description: Compare the currently active color with a newly picked one before confirming a change. Enable this by using the `showHistory` prop.
- example:
```jsx
;
```
### Accept empty value
- description: Allow to submit an empty value with `allowEmpty` prop. Use for non-mandatory color selection. Use the `emptyPlaceholder` prop to define the placeholder message shown in HEX value input.
- example:
```jsx
;
```
### Add color presets
- description: Enable users to build a custom palette by saving frequently used colors. An add button lets users add the current color to the swatches list. Pass the `` component to children and use the `onAdd` property to handle adding new swatches.
- example:
```jsx
() => {
const [value, setValue] = React.useState('#3899EC');
const [presets, setPresets] = React.useState([
'midnightblue',
'darkmagenta',
'lightcoral',
]);
return (
setPresets([...presets, color])}
addTooltipContent="Add color"
>
);
};
```
## Developer Examples
### Triggering the color picker
- description: Call out the picker popover on any component click, for example ``.
- example:
```jsx
() => {
const [colors, setColors] = React.useState([
{ id: '1', color: 'red' },
{ id: '2', color: 'blue' },
{ id: '3', color: 'green' },
]);
const updateColors = ({ id, color }) =>
setColors(
colors.map((item) => (item.id === id ? { ...item, color } : item)),
);
const TagThumb = ({ color }) => (
);
const TagPopover = (props) => {
const [color, setColor] = React.useState(props.color);
const [shown, setShown] = React.useState(false);
return (
setShown(!shown)}
onClickOutside={() => setShown(false)}
>
{color}
setShown(!shown)}
onConfirm={(value) => {
setShown(false);
updateColors({ id: props.id, color: value.hex() });
setColor(value.hex());
}}
onChange={() => {}}
/>
);
};
const tags = colors.map(({ color, id }) => ({
id,
label: ,
thumb: ,
}));
return (
);
};
```
### Adding color swatches
- description: Allow users to select a color from a list of presets by adding `` to the `children` area above the submit actions.
- example:
```jsx
() => {
const [value, setValue] = React.useState('#3899EC');
const [colors, setColors] = React.useState([
'midnightblue',
'darkmagenta',
'lightcoral',
]);
return (
setColors([...colors, color])}
>
{({ changeColor }) => (
{
changeColor(color);
}}
/>
)}
);
};
```
## Common Use Case Examples
### Custom color selection
- description: Use `colorPickerChildren` props inside `` to let users select and input custom color values.
- example:
```jsx
() => {
const [value, setValue] = React.useState('#3899EC');
const [presets, setPresets] = React.useState([
'midnightblue',
'darkmagenta',
'lightcoral',
]);
return (
(
)}
/>
);
};
```
### Adding color to color swatch
- description: Use `` with `` to let users add new colors to a palette.
- example:
```jsx
() => {
const [value, setValue] = React.useState(null);
const [colors, setColors] = React.useState(['tomato', 'thistle', 'tan']);
return (
setColors([...colors, color])}
colors={colors}
onClick={setValue}
selected={value}
renderColorPicker={({ cancel, confirm, setColor, currentColor }) => (
)}
/>
);
};
```