Image Viewer
Image Viewer renders images in standard or overlay modes with desktop and mobile breakpoints and RTL support.
Loading preview…
1
'use client';2
3
import { useState } from 'react';4
import { MediaViewer } from 'sdaia-ui';5
import type { MediaViewerImage } from 'sdaia-ui';Installation
npx sdaia-ui@latest add image-viewer
Usage
import { ImageViewer } from "@/components/ui/image-viewer"<ImageViewer type="standard" mobile={false} />Examples
Standard
Full-featured image viewer with navigation controls.
Loading preview…
1
<MediaViewer2
open={open}3
onClose={() => setOpen(false)}4
images={images}5
currentIndex={index}Overlay
Image viewer displayed as a fullscreen overlay on top of the page.
Loading preview…
1
<MediaViewer2
open={open}3
onClose={() => setOpen(false)}4
images={images}5
currentIndex={index}Mobile
Image viewer optimised for mobile screens with touch-friendly controls.
Loading preview…
1
<MediaViewer2
open={open}3
onClose={() => setOpen(false)}4
images={images}5
currentIndex={index}API Reference
Image Viewer Props
Props for the Image Viewer (MediaViewer) component.
Prop | Type | Default | Required |
|---|---|---|---|
open | boolean | - | optional |
onClose | () => void | - | optional |
images | MediaViewerImage[] | [] | optional |
currentIndex | number | 0 | optional |
onIndexChange | (index: number) => void | - | optional |
zoom | number | - | optional |
minZoom | number | 0.5 | optional |
maxZoom | number | 3 | optional |
zoomStep | number | 0.25 | optional |
onShare | () => void | - | optional |
onPrint | () => void | - | optional |
overlay | boolean | false | optional |
rtl | boolean | false | optional |
contained | boolean | false | optional |