[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)

# ColorPicker

Import: `import { ColorPicker } from '@neo4j-ndl/react'`

## Props

### ColorPicker

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `color` | `` HsvaColor \| RgbaColor \| `#${string}` `` | ✅ |  | The current color value. Can be provided in HSVA, RGBA, or Hex format. The component will automatically convert between formats as needed. |
| `floatingStrategy` | `'absolute' \| 'fixed'` |  | `absolute` | The floating strategy to use for the menu. If not provided, the menu will be positioned absolutely. |
| `onChange` | `` (newColor: { hex: `#${string}`; rgb: RgbaColor; hsva: HsvaColor; }) => void `` | ✅ |  | Callback function triggered when the color value changes. Receives an object containing the new color in all three formats (hex, rgb, hsva) for convenience. |
| `portalTarget` | `HTMLElement \| null` |  |  | The target element to portal the menu to. If not provided, the menu will not be portaled. |
| `shouldShowEyeDropper` | `boolean` |  | `true` | Whether to display the eye dropper tool that allows users to sample colors from anywhere on the screen. |
| `swatches` | `` (HsvaColor \| RgbaColor \| `#${string}`)[] `` |  | `Object.values(tokens.graph).filter(validHex)` | Optional array of predefined color swatches for quick selection. Each swatch can be in HSVA, RGBA, or Hex format. |

By default the `swatches` prop is set to the available graph colors (`tokens.graph`) from `@neo4j-ndl/base`.

Where `HsvaColor`, `RgbaColor`, and `HexColor` types are from `@uiw/react-color`, and represent different color formats:

- `HexColor`: A string in the format `#RRGGBB` (e.g., `#ff0000`).
- `RgbaColor`: An object with numeric properties `{ r, g, b, a }` for red, green, blue (0–255), and alpha (0–1).
- `HsvaColor`: An object with numeric properties `{ h, s, v, a }` for hue (0–360), saturation (0–100), value (0–100), and alpha (0–1).

Visit [react-color](https://uiwjs.github.io/react-color/#/) for more information.

## Examples

### Default

```tsx
import { useState } from 'react';

import { ColorPicker } from '../ColorPicker';

const Component = () => {
  const [color, setColor] = useState({
    a: 1, // oxlint-disable-line id-length
    b: 0, // oxlint-disable-line id-length
    g: 0, // oxlint-disable-line id-length
    r: 0, // oxlint-disable-line id-length
  });

  return (
    <ColorPicker
      color={color}
      onChange={(newColor) => setColor(newColor.rgb)}
    />
  );
};

export default Component;
```

### Custom Swatches

```tsx
import { useState } from 'react';

import { ColorPicker } from '../ColorPicker';

const Component = () => {
  const [color, setColor] = useState({
    a: 1, // oxlint-disable-line id-length
    b: 0, // oxlint-disable-line id-length
    g: 0, // oxlint-disable-line id-length
    r: 0, // oxlint-disable-line id-length
  });

  return (
    <ColorPicker
      color={color}
      onChange={(newColor) => setColor(newColor.rgb)}
      swatches={[
        {
          a: 1, // oxlint-disable-line id-length
          b: 0, // oxlint-disable-line id-length
          g: 0, // oxlint-disable-line id-length
          r: 0, // oxlint-disable-line id-length
        },
        {
          a: 1, // oxlint-disable-line id-length
          b: 255, // oxlint-disable-line id-length
          g: 0, // oxlint-disable-line id-length
          r: 0, // oxlint-disable-line id-length
        },
        {
          a: 1, // oxlint-disable-line id-length
          b: 0, // oxlint-disable-line id-length
          g: 255, // oxlint-disable-line id-length
          r: 0, // oxlint-disable-line id-length
        },
        {
          a: 1, // oxlint-disable-line id-length
          b: 0, // oxlint-disable-line id-length
          g: 0, // oxlint-disable-line id-length
          r: 255, // oxlint-disable-line id-length
        },
      ]}
    />
  );
};

export default Component;
```

### Dialog

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { ColorPicker, Dialog, FilledButton } from '@neo4j-ndl/react';
import { useState } from 'react';

const Component = () => {
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const handleClick = () => setIsOpen((prev) => !prev);
  const handleClose = () => setIsOpen(false);

  const [color, setColor] = useState({
    a: 1, // oxlint-disable-line id-length
    b: 0, // oxlint-disable-line id-length
    g: 0, // oxlint-disable-line id-length
    r: 0, // oxlint-disable-line id-length
  });

  return (
    <div className="n-flex n-items-center n-justify-centern-w-full">
      <FilledButton
        onClick={handleClick}
        htmlAttributes={{ 'aria-haspopup': 'dialog' }}
      >
        Open Dialog
      </FilledButton>
      <Dialog onClose={handleClose} isOpen={isOpen}>
        <Dialog.Header>Header</Dialog.Header>
        <Dialog.Content className="n-max-h-96 n-overflow-y-auto">
          <ColorPicker
            color={color}
            onChange={(newColor) => setColor(newColor.rgb)}
            floatingStrategy="fixed"
          />
        </Dialog.Content>
      </Dialog>
    </div>
  );
};

export default Component;
```

### Popover

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { ColorPicker, FilledButton, Popover } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <Popover>
      <Popover.Trigger hasButtonWrapper>
        <FilledButton>Open Popover</FilledButton>
      </Popover.Trigger>
      <Popover.Content className="n-overflow-y-auto n-overflow-x-hidden n-p-4 n-max-h-64">
        Popover content
        <ColorPicker
          color="#ff0000"
          onChange={() => {
            console.info('color changed');
          }}
          floatingStrategy="fixed"
          portalTarget={document.body}
        />
      </Popover.Content>
    </Popover>
  );
};

export default Component;
```

### Without Eyedropper

```tsx
import { useState } from 'react';

import { ColorPicker } from '../ColorPicker';

const Component = () => {
  const [color, setColor] = useState({
    a: 1, // oxlint-disable-line id-length
    b: 0, // oxlint-disable-line id-length
    g: 0, // oxlint-disable-line id-length
    r: 0, // oxlint-disable-line id-length
  });

  return (
    <ColorPicker
      color={color}
      onChange={(newColor) => setColor(newColor.rgb)}
      shouldShowEyeDropper={false}
    />
  );
};

export default Component;
```