# LightBox

Eine LightBox zeigt Bilder vergrößert als Overlay mit abgedunkeltem Hintergrund.

```tsx
import {
  Button,
  Image,
  LightBox,
  LightBoxTrigger,
} from "@mittwald/flow-react-components";

<LightBoxTrigger>
  <Button>Open LightBox</Button>
  <LightBox>
    <Image src="https://flow.mittwald.de/assets/mittwald_logo_rgb.jpg" />
  </LightBox>
</LightBoxTrigger>
```

---

# Best Practices

- Kennzeichne die Aktions-[Icons](/04-components/content/icon) klar und
  eindeutig. So vermeidest du Missverständnisse, etwa bei Löschen oder
  Herunterladen.
- Pflege sinnvolle Alt-Texte für die Bilder. Das sichert die
  Screenreader-Unterstützung.

---

# FitScreen

Standardmäßig passt sich der Inhalt der LightBox an die Bildschirmgröße an. Wird
die Property `fitScreen` auf `false` gesetzt, wird der Inhalt in seiner vollen
Höhe dargestellt. Falls der verfügbare Platz nicht ausreicht, erscheint eine
vertikale Scrollbar. Dieses Verhalten ist besonders hilfreich bei der
Darstellung von Inhalten mit großer vertikaler Ausdehnung, wie z. B.
mehrseitigen PDFs.

```tsx
import {
  Button,
  Image,
  LightBox,
  LightBoxTrigger,
} from "@mittwald/flow-react-components";

<LightBoxTrigger>
  <Button>Open LightBox</Button>
  <LightBox fitScreen={false}>
    <Image src="https://flow.mittwald.de/assets/mittwald_logo_rgb.jpg" />
  </LightBox>
</LightBoxTrigger>
```

---

# Galerie

Innerhalb der LightBox kann eine `LightBoxGallery` verwendet werden. Diese kann
mit `LightBoxGalleryItems` gefüllt werden, welche die Platzierung von
[Images](/04-components/content/image) und
[ActionGroups](/04-components/actions/action-group) unterstützen.

```tsx
import {
  Button,
  Flex,
  Image,
  LightBox,
  LightBoxTrigger,
  ActionGroup,
  LightBoxGallery,
  LightBoxGalleryItem,
  IconDownload,
} from "@mittwald/flow-react-components";

export default () => {
  const images = [
    "https://flow.mittwald.de/assets/mittwald_logo_rgb.jpg",
    "https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544",
  ];

  return (
    <Flex gap="m">
      {images.map((src, index) => (
        <LightBoxTrigger key={index}>
          <Button>
            <Image
              alt=""
              src={src}
              height="100px"
              withBorder
            />
          </Button>
          <LightBox>
            <LightBoxGallery defaultIndex={index}>
              {images.map((src) => (
                <LightBoxGalleryItem key={src}>
                  <Image src={src} />
                  <ActionGroup>
                    <Button aria-label="Herunterladen">
                      <IconDownload />
                    </Button>
                  </ActionGroup>
                </LightBoxGalleryItem>
              ))}
            </LightBoxGallery>
          </LightBox>
        </LightBoxTrigger>
      ))}
    </Flex>
  );
}
```

---

# Kombiniere mit …

## ActionGroup

In der LightBox kann eine [ActionGroup](/04-components/actions/action-group)
verwendet werden, diese richtet sich automatisch vertikal am Bild aus.

```tsx
import {
  ActionGroup,
  Button,
  IconDelete,
  IconDownload,
  Image,
  LightBox,
  LightBoxTrigger,
} from "@mittwald/flow-react-components";

<LightBoxTrigger>
  <Button>Open LightBox</Button>
  <LightBox>
    <Image src="https://flow.mittwald.de/assets/mittwald_logo_rgb.jpg" />
    <ActionGroup>
      <Button>
        <IconDownload />
      </Button>
      <Button>
        <IconDelete />
      </Button>
    </ActionGroup>
  </LightBox>
</LightBoxTrigger>
```

## Image

Als Trigger kann auch das [Image](/04-components/content/image) selbst verwendet
werden. Kombiniere dazu `<Button />` mit `<Image />`.

```tsx
import {
  Button,
  Image,
  LightBox,
  LightBoxTrigger,
} from "@mittwald/flow-react-components";

<LightBoxTrigger>
  <Button>
    <Image
      width={100}
      withBorder
      alt="mittwald"
      src="https://flow.mittwald.de/assets/mittwald_logo_rgb.jpg"
    />
  </Button>
  <LightBox>
    <Image
      alt="mittwald"
      src="https://flow.mittwald.de/assets/mittwald_logo_rgb.jpg"
    />
  </LightBox>
</LightBoxTrigger>
```

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `controller` | `OverlayController` | - | An overlay controller to control the light box state. |
| `fitScreen` | `boolean` | `true` | Whether content can be displayed larger than the available space in the screen. |
| `children` | `ReactNode` | - | - |
| `wrapWith` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | - | A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup. |
| `ref` | `Ref<HTMLSpanElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see [React Docs](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) |
| `key` | `Key` | - | - |
| `className` | `string` | - | The elements class name. |