Components
ImageLightbox
Full-screen modal gallery for viewing images with navigation between slides.
ImageLightbox opens a full-screen, navigable overlay for viewing images at
size — wrap it around a thumbnail grid so clicking a photo opens the gallery.
It is controlled: drive open from your state, supply the slides array, set
startIndex for which one opens first, and reset open in onClose.
Example
Preview
import { ImageLightbox } from '@officina/ui';
import { useState } from 'react';
function Gallery() {
const [open, setOpen] = useState(false);
return (
<>
<button onClick={() => setOpen(true)}>View photos</button>
<ImageLightbox
open={open}
onClose={() => setOpen(false)}
startIndex={0}
slides={[{ src: '/photos/1.jpg' }, { src: '/photos/2.jpg' }]}
/>
</>
);
}API
| Prop | Type | Default | Description |
|---|---|---|---|
| onClose* | () => void | — | Called when the lightbox is dismissed. |
| open* | boolean | — | Whether the lightbox is open (controlled). |
| slides* | SlideImage[] | — | Images to display in the gallery. |
| startIndex | number | 0 | Zero-based index of the slide shown first. Defaults to `0`. |