Product Gallery
An image viewer with a thumbnail strip, usable controlled or uncontrolled.
Control it when the page has other inputs
Uncontrolled is fine for a plain gallery. Pass activeIndex when something else on the page should be able to move it — picking a colour swatch jumping to that variant's photo, for instance.
Showing image 1
Thumbnails on the left
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| images | { src: string; alt?: string }[] | The images, in display order. | |
| thumbsPosition | 'bottom' | 'left' | 'bottom' | Where the thumbnail strip sits. |
| activeIndex | number | Controlled selection. Omit to let the gallery manage its own. | |
| defaultActiveIndex | number | 0 | Initial selection when uncontrolled. |
| onActiveIndexChange | (index: number) => void | Fires when the selection changes, in both modes. |
Why it works this way
Why
- Uncontrolled is fine for a plain gallery. Pass activeIndex when something else should move it, such as picking a colour swatch jumping to that variant's photo.
Don't
- Don't leave it uncontrolled if other inputs on the page need to change the image.