# components/Lightbox (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/Lightbox.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/Lightbox.tsx).

## Functions

### `useLightbox`

Function.

Owns the state of an attachment lightbox. Returns `open(items, index, origin?)`, which
shows the gallery at `index` (clamped to the list; an empty list is ignored) and grows
the image out of the `origin` thumbnail, `close()`, and `element`, which the caller
renders once. It is `null` while the lightbox is closed.

```ts
function useLightbox(): { close: () => void; element: Element | null; open: (items: readonly LightboxItem[], index: number, origin?: HTMLElement | null) => void }
```

**Returns** `{ close: () => void; element: Element | null; open: (items: readonly LightboxItem[], index: number, origin?: HTMLElement | null) => void }`

Source: [ui/src/components/Lightbox.tsx:71](https://github.com/Tahul/zidane/blob/main/ui/src/components/Lightbox.tsx#L71)

## Interfaces

### `LightboxItem`

Interface.

One attachment shown in the lightbox: an image, or a text preview drawn by `body`.

```ts
interface LightboxItem
```

**Properties**

- `body?` (`() => ReactNode`): Renders the item's content when it has no `src`, such as a text preview.
- `key` (`string`): Stable identifier for the item.
- `name` (`string`): Name shown as the caption, and used as the image's alt text and the dialog's label.
- `src?` (`string`): Image source. Items without one render `body` instead (a text preview).

Source: [ui/src/components/Lightbox.tsx:38](https://github.com/Tahul/zidane/blob/main/ui/src/components/Lightbox.tsx#L38)