PDF Viewer
PDF Viewer renders PDF documents with an optional header toolbar across desktop, tablet, and mobile breakpoints with RTL support.
Loading preview…
1
'use client';2
3
import { useState } from 'react';4
import { PdfViewer } from 'sdaia-ui';5
Installation
npx sdaia-ui@latest add pdf-viewer
Usage
import { PDFViewer } from "@/components/ui/pdf-viewer"<PDFViewer src="..." pdfHeader={true} breakpoint="desktop" />Examples
Desktop
Full-featured PDF viewer for desktop screens.
Loading preview…
1
<PdfViewer2
breakpoint="desktop"3
headerTitle="PDF Title"4
headerSubtitle="10.5 KB"5
infoItems={[With Header
PDF viewer with the document header panel visible.
Loading preview…
1
<PdfViewer2
showHeader3
headerTitle="PDF Title"4
headerSubtitle="10.5 KB"5
infoItems={[API Reference
MediaViewerProps
Props for the MediaViewer component.
Prop | Type | Default | Required |
|---|---|---|---|
open | boolean | - | required |
onClose | () => void | - | required |
images | MediaViewerImage[] | [] | optional |
currentIndex | number | - | optional |
onIndexChange | (index: number) => void | - | optional |
zoom | number | - | optional |
onZoomChange | (zoom: number) => void | - | 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 |