@iamjariwala/react-doc-viewer 1.3.0 → 1.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +387 -21
- package/dist/{index-DmaJEXn6.cjs → index-B_9N115A.cjs} +1 -1
- package/dist/index-Bxz55fXL.cjs +42 -0
- package/dist/{index-Bqo4f0KC.cjs → index-DDciENnB.cjs} +1 -1
- package/dist/{index-KW-32X-v.js → index-DHsZZ2xX.js} +8729 -7718
- package/dist/{index-6DCiyoVr.js → index-DdxtHbXJ.js} +2 -2
- package/dist/{index-CxXEssOW.js → index-yeyotorh.js} +2 -2
- package/dist/index.css +1 -1
- package/dist/react-doc-viewer.cjs +1 -1
- package/dist/react-doc-viewer.js +16 -15
- package/dist/src/features/bookmarks/components/BookmarkItem.d.ts +10 -0
- package/dist/src/features/bookmarks/components/BookmarksSidebar.d.ts +7 -0
- package/dist/src/features/bookmarks/components/BookmarksToggle.d.ts +3 -0
- package/dist/src/features/bookmarks/hooks/useBookmarks.d.ts +7 -0
- package/dist/src/features/bookmarks/index.d.ts +7 -0
- package/dist/src/features/bookmarks/state/actions.d.ts +6 -0
- package/dist/src/features/bookmarks/state/context.d.ts +8 -0
- package/dist/src/features/bookmarks/state/provider.d.ts +3 -0
- package/dist/src/features/bookmarks/state/reducer.d.ts +4 -0
- package/dist/src/features/bookmarks/types/index.d.ts +22 -0
- package/dist/src/features/keyboard-shortcuts/hooks/useKeyboardShortcuts.d.ts +3 -0
- package/dist/src/features/keyboard-shortcuts/index.d.ts +2 -0
- package/dist/src/features/keyboard-shortcuts/types/index.d.ts +8 -0
- package/dist/src/features/password-pdf/components/PasswordPrompt.d.ts +8 -0
- package/dist/src/features/password-pdf/index.d.ts +1 -0
- package/dist/src/features/split-view/components/SplitViewContainer.d.ts +10 -0
- package/dist/src/features/split-view/index.d.ts +1 -0
- package/dist/src/features/text-search/components/SearchBar.d.ts +8 -0
- package/dist/src/features/text-search/hooks/useTextSearch.d.ts +7 -0
- package/dist/src/features/text-search/index.d.ts +6 -0
- package/dist/src/features/text-search/state/actions.d.ts +10 -0
- package/dist/src/features/text-search/state/context.d.ts +8 -0
- package/dist/src/features/text-search/state/provider.d.ts +3 -0
- package/dist/src/features/text-search/state/reducer.d.ts +4 -0
- package/dist/src/features/text-search/types/index.d.ts +34 -0
- package/dist/src/features/watermark/components/WatermarkOverlay.d.ts +8 -0
- package/dist/src/features/watermark/index.d.ts +1 -0
- package/dist/src/hooks/useFullscreen.d.ts +6 -0
- package/dist/src/hooks/useTranslation.d.ts +1 -1
- package/dist/src/i18n.d.ts +224 -0
- package/dist/src/index.d.ts +1 -0
- package/dist/src/locales/ar.json.d.ts +17 -1
- package/dist/src/locales/de.json.d.ts +17 -1
- package/dist/src/locales/en.json.d.ts +17 -1
- package/dist/src/locales/es.json.d.ts +17 -1
- package/dist/src/locales/fr.json.d.ts +17 -1
- package/dist/src/locales/it.json.d.ts +17 -1
- package/dist/src/locales/ja.json.d.ts +17 -1
- package/dist/src/locales/pl.json.d.ts +17 -1
- package/dist/src/locales/pt.json.d.ts +17 -1
- package/dist/src/locales/ru.json.d.ts +17 -1
- package/dist/src/locales/se.json.d.ts +17 -1
- package/dist/src/locales/sr.json.d.ts +17 -1
- package/dist/src/locales/sr_cyr.json.d.ts +17 -1
- package/dist/src/locales/tr.json.d.ts +17 -1
- package/dist/src/models.d.ts +46 -0
- package/dist/src/renderers/pdf/components/PDFControls.d.ts +4 -1
- package/dist/src/renderers/pdf/components/icons/index.d.ts +6 -0
- package/dist/src/renderers/pdf/state/actions.d.ts +19 -1
- package/dist/src/renderers/pdf/state/reducer.d.ts +3 -0
- package/dist/{url-CJeZlLag.cjs → url-CJMs95kL.cjs} +1 -1
- package/dist/{url-CF0N15Q9.js → url-DNNqPKsX.js} +1 -1
- package/package.json +1 -1
- package/dist/index-BhiXjIfF.cjs +0 -42
package/README.md
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
|
|
11
11
|
# @iamjariwala/react-doc-viewer
|
|
12
12
|
|
|
13
|
-
**The most feature-complete open-source document viewer for React.** Render PDF, Word, Excel, PowerPoint, images, video, CSV, HTML, and 20+ file types in a single drop-in component.
|
|
13
|
+
**The most feature-complete open-source document viewer for React.** Render PDF, Word, Excel, PowerPoint, images, video, CSV, HTML, and 20+ file types in a single drop-in component. Dark mode, text search, annotations, keyboard shortcuts, watermarks, bookmarks/TOC, password-protected PDFs, fullscreen, print, split view, drag-and-drop, thumbnails, zoom, i18n (14 languages) -- all with full TypeScript support.
|
|
14
14
|
|
|
15
15
|
> **One component. 20+ file types. Zero hassle.**
|
|
16
16
|
|
|
@@ -37,7 +37,18 @@ import "@iamjariwala/react-doc-viewer/dist/index.css";
|
|
|
37
37
|
Most React document viewers only handle PDFs or require expensive commercial licenses. This library gives you **everything in one package**:
|
|
38
38
|
|
|
39
39
|
- **20+ file types** in a single `<DocViewer />` component -- no need to install separate libraries for PDF, images, CSV, video, etc.
|
|
40
|
+
- **Dark Mode** -- built-in light/dark/auto theme switching with full CSS variable support
|
|
41
|
+
- **Text Search** -- full-text search across all PDF pages with match highlighting and navigation
|
|
40
42
|
- **Annotations** -- highlight text, freehand draw, add comments, and export as JSON
|
|
43
|
+
- **Keyboard Shortcuts** -- navigate pages, zoom, search, print, and fullscreen via keyboard
|
|
44
|
+
- **Watermark Overlay** -- configurable text watermark with custom opacity, color, size, and rotation
|
|
45
|
+
- **Bookmarks / TOC** -- auto-extracted PDF outline with nested sidebar navigation
|
|
46
|
+
- **Password-Protected PDFs** -- built-in password prompt modal for encrypted documents
|
|
47
|
+
- **Fullscreen Mode** -- one-click fullscreen with keyboard shortcut (F key)
|
|
48
|
+
- **Print** -- print PDFs directly from the toolbar or via Ctrl+P
|
|
49
|
+
- **Split View** -- side-by-side document comparison with optional synchronized scrolling
|
|
50
|
+
- **Loading Progress** -- animated progress bar during PDF loading
|
|
51
|
+
- **Text Selection** -- select and copy text from PDF pages
|
|
41
52
|
- **Drag & Drop** -- drop files directly onto the viewer to add or replace documents
|
|
42
53
|
- **Thumbnail Sidebar** -- visual page navigation with click-to-jump for PDFs
|
|
43
54
|
- **Programmatic Control** -- jump to any page via ref or prop, navigate documents programmatically
|
|
@@ -54,13 +65,13 @@ Most React document viewers only handle PDFs or require expensive commercial lic
|
|
|
54
65
|
| Use Case | Why this library |
|
|
55
66
|
| -------- | ---------------- |
|
|
56
67
|
| **Document Management Systems (DMS)** | Preview any uploaded file without leaving the app |
|
|
57
|
-
| **Legal & Compliance Platforms** | Annotate, highlight, and
|
|
68
|
+
| **Legal & Compliance Platforms** | Annotate, highlight, watermark, and search contracts and filings |
|
|
58
69
|
| **Education & LMS** | Display course materials in PDF, DOCX, video, and image formats |
|
|
59
|
-
| **Healthcare & Medical Records** | View lab reports, imaging files, and clinical documents |
|
|
60
|
-
| **Real Estate & Insurance** | Preview property documents, claims, and inspection photos |
|
|
61
|
-
| **File Browsers & Cloud Storage** | Inline file preview for any storage UI |
|
|
62
|
-
| **Internal Tools & Admin Panels** | Quick document preview
|
|
63
|
-
| **Content Platforms & CMS** | Embedded viewer for user-uploaded content |
|
|
70
|
+
| **Healthcare & Medical Records** | View lab reports, imaging files, and clinical documents with password protection |
|
|
71
|
+
| **Real Estate & Insurance** | Preview property documents, claims, and inspection photos with split view compare |
|
|
72
|
+
| **File Browsers & Cloud Storage** | Inline file preview for any storage UI with dark mode support |
|
|
73
|
+
| **Internal Tools & Admin Panels** | Quick document preview with fullscreen, print, and keyboard shortcuts |
|
|
74
|
+
| **Content Platforms & CMS** | Embedded viewer for user-uploaded content with watermark overlay |
|
|
64
75
|
|
|
65
76
|
---
|
|
66
77
|
|
|
@@ -75,8 +86,19 @@ Looking for the best React document viewer? Here's how `@iamjariwala/react-doc-v
|
|
|
75
86
|
| Images (PNG, JPG, GIF, WebP, TIFF, BMP) | Yes | -- | Yes | Partial |
|
|
76
87
|
| Video (MP4) | Yes | -- | Yes | Yes |
|
|
77
88
|
| CSV / TXT / HTML | Yes | -- | Yes | Partial |
|
|
78
|
-
|
|
|
89
|
+
| Dark Mode (light / dark / auto) | Yes | -- | -- | -- |
|
|
90
|
+
| Text Search across pages | Yes | -- | -- | -- |
|
|
79
91
|
| Annotations (highlight, draw, comment) | Yes | -- | -- | -- |
|
|
92
|
+
| Keyboard Shortcuts | Yes | -- | -- | -- |
|
|
93
|
+
| Watermark Overlay | Yes | -- | -- | -- |
|
|
94
|
+
| PDF Bookmarks / TOC sidebar | Yes | -- | -- | -- |
|
|
95
|
+
| Password-Protected PDFs | Yes | Yes | -- | -- |
|
|
96
|
+
| Fullscreen Mode | Yes | -- | -- | -- |
|
|
97
|
+
| Print from toolbar | Yes | -- | -- | -- |
|
|
98
|
+
| Split View / Compare | Yes | -- | -- | -- |
|
|
99
|
+
| Loading Progress Bar | Yes | -- | -- | -- |
|
|
100
|
+
| Text Selection & Copy | Yes | Yes | -- | -- |
|
|
101
|
+
| Drag & Drop file upload | Yes | -- | -- | -- |
|
|
80
102
|
| Thumbnail sidebar navigation | Yes | -- | -- | -- |
|
|
81
103
|
| Programmatic page jump | Yes | Yes | -- | -- |
|
|
82
104
|
| i18n (14 languages) | Yes | -- | -- | -- |
|
|
@@ -89,7 +111,7 @@ Looking for the best React document viewer? Here's how `@iamjariwala/react-doc-v
|
|
|
89
111
|
| Actively maintained (2025) | Yes | Yes | -- | -- |
|
|
90
112
|
| License | Apache-2.0 | MIT | MIT | MIT |
|
|
91
113
|
|
|
92
|
-
> **TL;DR** -- If you only render PDFs, `react-pdf` is lighter. If you need multi-format support, annotations,
|
|
114
|
+
> **TL;DR** -- If you only render PDFs, `react-pdf` is lighter. If you need multi-format support with a professional-grade feature set (search, annotations, dark mode, keyboard shortcuts, watermarks, bookmarks, split view, and more), this library covers all of it in a single package.
|
|
93
115
|
|
|
94
116
|
---
|
|
95
117
|
|
|
@@ -97,19 +119,29 @@ Looking for the best React document viewer? Here's how `@iamjariwala/react-doc-v
|
|
|
97
119
|
|
|
98
120
|
| | | |
|
|
99
121
|
|:--|:--|:--|
|
|
100
|
-
| **
|
|
101
|
-
| **
|
|
102
|
-
| **
|
|
122
|
+
| **Dark Mode** -- Light, dark, and auto theme with CSS variables | **Text Search** -- Full-text search across all PDF pages | **Annotations** -- Highlight, draw, and comment on documents |
|
|
123
|
+
| **Keyboard Shortcuts** -- Navigate, zoom, search, print via keyboard | **Watermark** -- Configurable text overlay for confidential docs | **Bookmarks / TOC** -- Auto-extracted PDF outline sidebar |
|
|
124
|
+
| **Password PDFs** -- Built-in password prompt for encrypted files | **Fullscreen** -- One-click or F-key fullscreen mode | **Print** -- Print directly from toolbar or Ctrl+P |
|
|
125
|
+
| **Split View** -- Side-by-side compare with sync scroll | **Thumbnail Sidebar** -- Visual page navigation for PDFs | **20+ File Types** -- PDF, DOCX, images, video, CSV & more |
|
|
126
|
+
| **Drag & Drop** -- Drop files directly onto the viewer | **14 Languages** -- Built-in i18n with community translations | **Custom Renderers** -- Extend or replace any file type |
|
|
103
127
|
|
|
104
128
|
---
|
|
105
129
|
|
|
106
|
-
### What's New in v1.
|
|
130
|
+
### What's New in v1.3.0
|
|
131
|
+
|
|
132
|
+
**11 new features** that bring the viewer to professional-grade quality:
|
|
107
133
|
|
|
108
|
-
- **
|
|
109
|
-
- **
|
|
110
|
-
- **
|
|
111
|
-
- **
|
|
112
|
-
- **
|
|
134
|
+
- **Dark Mode** -- `themeMode: "light" | "dark" | "auto"` with full CSS variable theming and `prefers-color-scheme` auto-detection
|
|
135
|
+
- **Print** -- Print button in toolbar, opens PDF in hidden iframe for native print dialog
|
|
136
|
+
- **Fullscreen** -- Toggle fullscreen from toolbar or keyboard (F key), with proper Escape exit
|
|
137
|
+
- **Loading Progress Bar** -- Animated progress bar during PDF loading with smooth transitions
|
|
138
|
+
- **Watermark Overlay** -- Repeated rotated text overlay with configurable opacity, color, size, and rotation
|
|
139
|
+
- **Text Selection & Copy** -- Enable react-pdf text layer for selecting and copying text from PDF pages
|
|
140
|
+
- **Keyboard Shortcuts** -- Arrow keys for pages, +/- for zoom, Home/End, Ctrl+F for search, Ctrl+P for print, F for fullscreen
|
|
141
|
+
- **Password-Protected PDFs** -- Modal password prompt with error feedback for encrypted PDF files
|
|
142
|
+
- **Text Search** -- Full-text search across all pages using pdfjs, with match count, prev/next navigation, and Ctrl+F shortcut
|
|
143
|
+
- **PDF Bookmarks / TOC** -- Sidebar with auto-extracted PDF outline (table of contents), nested items, click-to-navigate
|
|
144
|
+
- **Split View / Compare** -- `<SplitDocViewer>` component with two viewers side-by-side, draggable divider, and optional scroll sync
|
|
113
145
|
|
|
114
146
|
---
|
|
115
147
|
|
|
@@ -138,6 +170,17 @@ Looking for the best React document viewer? Here's how `@iamjariwala/react-doc-v
|
|
|
138
170
|
- [Custom Renderer](#custom-renderer)
|
|
139
171
|
- [Custom File Loader](#custom-file-loader)
|
|
140
172
|
- [Features](#features)
|
|
173
|
+
- [Dark Mode](#dark-mode)
|
|
174
|
+
- [Text Search in PDF](#text-search-in-pdf)
|
|
175
|
+
- [Keyboard Shortcuts](#keyboard-shortcuts)
|
|
176
|
+
- [Watermark Overlay](#watermark-overlay)
|
|
177
|
+
- [PDF Bookmarks / TOC Sidebar](#pdf-bookmarks--toc-sidebar)
|
|
178
|
+
- [Password-Protected PDFs](#password-protected-pdfs)
|
|
179
|
+
- [Fullscreen Mode](#fullscreen-mode)
|
|
180
|
+
- [Print](#print)
|
|
181
|
+
- [Split View / Compare](#split-view--compare)
|
|
182
|
+
- [Loading Progress Bar](#loading-progress-bar)
|
|
183
|
+
- [Text Selection & Copy](#text-selection--copy)
|
|
141
184
|
- [Drag & Drop File Upload](#drag--drop-file-upload)
|
|
142
185
|
- [Thumbnail Sidebar](#thumbnail-sidebar)
|
|
143
186
|
- [Annotations (Highlight, Draw, Comment)](#annotations-highlight-draw-comment)
|
|
@@ -169,7 +212,7 @@ Looking for the best React document viewer? Here's how `@iamjariwala/react-doc-v
|
|
|
169
212
|
|
|
170
213
|
| Extension | MIME Type | Renderer |
|
|
171
214
|
| --------- | --------- | -------- |
|
|
172
|
-
| pdf | `application/pdf` | Full viewer with zoom, pagination, thumbnails |
|
|
215
|
+
| pdf | `application/pdf` | Full viewer with zoom, pagination, thumbnails, search, bookmarks |
|
|
173
216
|
| png | `image/png` | Image with checkerboard background |
|
|
174
217
|
| jpg / jpeg | `image/jpg`, `image/jpeg` | Image viewer |
|
|
175
218
|
| gif | `image/gif` | Image viewer (animated GIF support) |
|
|
@@ -431,6 +474,269 @@ MyPNGRenderer.fileLoader = ({ documentURI, signal, fileLoaderComplete }) => {
|
|
|
431
474
|
|
|
432
475
|
## Features
|
|
433
476
|
|
|
477
|
+
### Dark Mode
|
|
478
|
+
|
|
479
|
+
Switch between light, dark, and auto (system preference) themes. Dark mode applies to the entire viewer including the toolbar, header, sidebars, and modals.
|
|
480
|
+
|
|
481
|
+
```tsx
|
|
482
|
+
<DocViewer
|
|
483
|
+
documents={docs}
|
|
484
|
+
pluginRenderers={DocViewerRenderers}
|
|
485
|
+
config={{
|
|
486
|
+
themeMode: "dark",
|
|
487
|
+
}}
|
|
488
|
+
/>
|
|
489
|
+
```
|
|
490
|
+
|
|
491
|
+
| Option | Type | Default | Description |
|
|
492
|
+
| ------ | ---- | ------- | ----------- |
|
|
493
|
+
| `themeMode` | `"light" \| "dark" \| "auto"` | `"light"` | `"auto"` uses `prefers-color-scheme` media query |
|
|
494
|
+
|
|
495
|
+
The `"auto"` mode listens for system theme changes in real-time. All dark mode styles use `[data-theme="dark"]` CSS selectors, so you can override any element:
|
|
496
|
+
|
|
497
|
+
```css
|
|
498
|
+
#react-doc-viewer[data-theme="dark"] .rdv-pdf-controls {
|
|
499
|
+
background: #1a1a2e;
|
|
500
|
+
}
|
|
501
|
+
```
|
|
502
|
+
|
|
503
|
+
### Text Search in PDF
|
|
504
|
+
|
|
505
|
+
Full-text search across all pages using the pdfjs text extraction API. Displays match count with prev/next navigation.
|
|
506
|
+
|
|
507
|
+
```tsx
|
|
508
|
+
<DocViewer
|
|
509
|
+
documents={docs}
|
|
510
|
+
pluginRenderers={DocViewerRenderers}
|
|
511
|
+
config={{
|
|
512
|
+
search: { enableSearch: true },
|
|
513
|
+
keyboard: { enableKeyboardShortcuts: true },
|
|
514
|
+
}}
|
|
515
|
+
/>
|
|
516
|
+
```
|
|
517
|
+
|
|
518
|
+
| Option | Type | Default | Description |
|
|
519
|
+
| ------ | ---- | ------- | ----------- |
|
|
520
|
+
| `enableSearch` | `boolean` | `false` | Show search icon in toolbar and enable Ctrl+F shortcut |
|
|
521
|
+
|
|
522
|
+
When enabled, a search icon appears in the toolbar. Click it or press **Ctrl+F** to open the search bar. Press **Enter** to go to the next match, **Shift+Enter** for the previous match, and **Escape** to close.
|
|
523
|
+
|
|
524
|
+
### Keyboard Shortcuts
|
|
525
|
+
|
|
526
|
+
Navigate pages, zoom, search, print, and toggle fullscreen entirely from the keyboard.
|
|
527
|
+
|
|
528
|
+
```tsx
|
|
529
|
+
<DocViewer
|
|
530
|
+
documents={docs}
|
|
531
|
+
pluginRenderers={DocViewerRenderers}
|
|
532
|
+
config={{
|
|
533
|
+
keyboard: { enableKeyboardShortcuts: true },
|
|
534
|
+
search: { enableSearch: true },
|
|
535
|
+
fullscreen: { enableFullscreen: true },
|
|
536
|
+
print: { enablePrint: true },
|
|
537
|
+
}}
|
|
538
|
+
/>
|
|
539
|
+
```
|
|
540
|
+
|
|
541
|
+
| Shortcut | Action |
|
|
542
|
+
| -------- | ------ |
|
|
543
|
+
| `Arrow Left` / `Arrow Right` | Previous / next page |
|
|
544
|
+
| `Home` / `End` | First / last page |
|
|
545
|
+
| `+` or `=` | Zoom in |
|
|
546
|
+
| `-` | Zoom out |
|
|
547
|
+
| `0` | Reset zoom |
|
|
548
|
+
| `Ctrl+F` | Open text search (requires `search.enableSearch`) |
|
|
549
|
+
| `Ctrl+P` | Print (requires `print.enablePrint`) |
|
|
550
|
+
| `F` | Toggle fullscreen (requires `fullscreen.enableFullscreen`) |
|
|
551
|
+
| `Escape` | Close search / exit fullscreen |
|
|
552
|
+
|
|
553
|
+
Shortcuts are automatically disabled when focus is inside an input, textarea, or select element.
|
|
554
|
+
|
|
555
|
+
### Watermark Overlay
|
|
556
|
+
|
|
557
|
+
Add a configurable text watermark overlay to every PDF page. The watermark is rendered as a non-interactive CSS grid of repeated rotated text.
|
|
558
|
+
|
|
559
|
+
```tsx
|
|
560
|
+
<DocViewer
|
|
561
|
+
documents={docs}
|
|
562
|
+
pluginRenderers={DocViewerRenderers}
|
|
563
|
+
config={{
|
|
564
|
+
watermark: {
|
|
565
|
+
text: "CONFIDENTIAL",
|
|
566
|
+
opacity: 0.08,
|
|
567
|
+
fontSize: 52,
|
|
568
|
+
color: "#ff0000",
|
|
569
|
+
rotation: -35,
|
|
570
|
+
},
|
|
571
|
+
}}
|
|
572
|
+
/>
|
|
573
|
+
```
|
|
574
|
+
|
|
575
|
+
| Option | Type | Default | Description |
|
|
576
|
+
| ------ | ---- | ------- | ----------- |
|
|
577
|
+
| `text` | `string` | (required) | Watermark text to display |
|
|
578
|
+
| `opacity` | `number` | `0.1` | Opacity (0 to 1) |
|
|
579
|
+
| `fontSize` | `number` | `48` | Font size in pixels |
|
|
580
|
+
| `color` | `string` | `"#000"` | Text color |
|
|
581
|
+
| `rotation` | `number` | `-30` | Rotation angle in degrees |
|
|
582
|
+
|
|
583
|
+
The watermark has `pointer-events: none` so it never blocks interaction with the document.
|
|
584
|
+
|
|
585
|
+
### PDF Bookmarks / TOC Sidebar
|
|
586
|
+
|
|
587
|
+
Automatically extract and display the PDF's table of contents (outline) in a collapsible sidebar. Nested bookmark items are supported with indentation.
|
|
588
|
+
|
|
589
|
+
```tsx
|
|
590
|
+
<DocViewer
|
|
591
|
+
documents={docs}
|
|
592
|
+
pluginRenderers={DocViewerRenderers}
|
|
593
|
+
config={{
|
|
594
|
+
bookmarks: { enableBookmarks: true },
|
|
595
|
+
}}
|
|
596
|
+
/>
|
|
597
|
+
```
|
|
598
|
+
|
|
599
|
+
| Option | Type | Default | Description |
|
|
600
|
+
| ------ | ---- | ------- | ----------- |
|
|
601
|
+
| `enableBookmarks` | `boolean` | `false` | Show bookmarks icon in toolbar |
|
|
602
|
+
|
|
603
|
+
When enabled, a bookmarks icon appears in the toolbar. Click to toggle the sidebar. Each bookmark navigates to its target page. If the PDF has no outline, an empty state message is shown.
|
|
604
|
+
|
|
605
|
+
### Password-Protected PDFs
|
|
606
|
+
|
|
607
|
+
Display a password prompt modal when a PDF file is encrypted. The user enters their password to decrypt and view the document.
|
|
608
|
+
|
|
609
|
+
```tsx
|
|
610
|
+
<DocViewer
|
|
611
|
+
documents={docs}
|
|
612
|
+
pluginRenderers={DocViewerRenderers}
|
|
613
|
+
config={{
|
|
614
|
+
password: { enablePasswordPrompt: true },
|
|
615
|
+
}}
|
|
616
|
+
/>
|
|
617
|
+
```
|
|
618
|
+
|
|
619
|
+
| Option | Type | Default | Description |
|
|
620
|
+
| ------ | ---- | ------- | ----------- |
|
|
621
|
+
| `enablePasswordPrompt` | `boolean` | `false` | Show password modal for encrypted PDFs |
|
|
622
|
+
|
|
623
|
+
When disabled, encrypted PDFs will fail to load silently. When enabled, a styled modal with a lock icon, password input, and error feedback appears.
|
|
624
|
+
|
|
625
|
+
### Fullscreen Mode
|
|
626
|
+
|
|
627
|
+
Toggle fullscreen viewing from the toolbar or keyboard. The entire PDF container (including toolbar and sidebars) enters fullscreen.
|
|
628
|
+
|
|
629
|
+
```tsx
|
|
630
|
+
<DocViewer
|
|
631
|
+
documents={docs}
|
|
632
|
+
pluginRenderers={DocViewerRenderers}
|
|
633
|
+
config={{
|
|
634
|
+
fullscreen: { enableFullscreen: true },
|
|
635
|
+
keyboard: { enableKeyboardShortcuts: true },
|
|
636
|
+
}}
|
|
637
|
+
/>
|
|
638
|
+
```
|
|
639
|
+
|
|
640
|
+
| Option | Type | Default | Description |
|
|
641
|
+
| ------ | ---- | ------- | ----------- |
|
|
642
|
+
| `enableFullscreen` | `boolean` | `false` | Show fullscreen icon in toolbar and enable F shortcut |
|
|
643
|
+
|
|
644
|
+
Press **F** to toggle fullscreen, **Escape** to exit. The fullscreen icon in the toolbar dynamically switches between enter/exit icons.
|
|
645
|
+
|
|
646
|
+
### Print
|
|
647
|
+
|
|
648
|
+
Print the current PDF document directly from the toolbar. Opens the browser's native print dialog.
|
|
649
|
+
|
|
650
|
+
```tsx
|
|
651
|
+
<DocViewer
|
|
652
|
+
documents={docs}
|
|
653
|
+
pluginRenderers={DocViewerRenderers}
|
|
654
|
+
config={{
|
|
655
|
+
print: { enablePrint: true },
|
|
656
|
+
keyboard: { enableKeyboardShortcuts: true },
|
|
657
|
+
}}
|
|
658
|
+
/>
|
|
659
|
+
```
|
|
660
|
+
|
|
661
|
+
| Option | Type | Default | Description |
|
|
662
|
+
| ------ | ---- | ------- | ----------- |
|
|
663
|
+
| `enablePrint` | `boolean` | `false` | Show print icon in toolbar and enable Ctrl+P shortcut |
|
|
664
|
+
|
|
665
|
+
The print feature creates a hidden iframe with the PDF, loads it, and triggers `window.print()` for the native print dialog. Print media CSS automatically hides the toolbar and sidebars.
|
|
666
|
+
|
|
667
|
+
### Split View / Compare
|
|
668
|
+
|
|
669
|
+
Compare two documents side-by-side with an independent `<SplitDocViewer>` component. Each side has its own DocViewer instance with independent navigation, zoom, and controls.
|
|
670
|
+
|
|
671
|
+
```tsx
|
|
672
|
+
import { SplitDocViewer } from "@iamjariwala/react-doc-viewer";
|
|
673
|
+
import "@iamjariwala/react-doc-viewer/dist/index.css";
|
|
674
|
+
|
|
675
|
+
<SplitDocViewer
|
|
676
|
+
left={{
|
|
677
|
+
documents: [{ uri: "/document-v1.pdf" }],
|
|
678
|
+
config: { pdfVerticalScrollByDefault: true },
|
|
679
|
+
}}
|
|
680
|
+
right={{
|
|
681
|
+
documents: [{ uri: "/document-v2.pdf" }],
|
|
682
|
+
config: { pdfVerticalScrollByDefault: true },
|
|
683
|
+
}}
|
|
684
|
+
syncScroll={true}
|
|
685
|
+
/>
|
|
686
|
+
```
|
|
687
|
+
|
|
688
|
+
| Prop | Type | Description |
|
|
689
|
+
| ---- | ---- | ----------- |
|
|
690
|
+
| `left` | `{ documents, config?, pluginRenderers?, ... }` | Props for the left DocViewer instance |
|
|
691
|
+
| `right` | `{ documents, config?, pluginRenderers?, ... }` | Props for the right DocViewer instance |
|
|
692
|
+
| `syncScroll` | `boolean` | When `true`, scrolling one side scrolls the other |
|
|
693
|
+
|
|
694
|
+
The divider between panels is draggable to resize. `SplitDocViewer` is exported directly from the package:
|
|
695
|
+
|
|
696
|
+
```tsx
|
|
697
|
+
import { SplitDocViewer } from "@iamjariwala/react-doc-viewer";
|
|
698
|
+
```
|
|
699
|
+
|
|
700
|
+
### Loading Progress Bar
|
|
701
|
+
|
|
702
|
+
Display an animated progress bar while PDF documents are loading. Shows actual load progress from the PDF.js library.
|
|
703
|
+
|
|
704
|
+
```tsx
|
|
705
|
+
<DocViewer
|
|
706
|
+
documents={docs}
|
|
707
|
+
pluginRenderers={DocViewerRenderers}
|
|
708
|
+
config={{
|
|
709
|
+
loadingProgress: { enableProgressBar: true },
|
|
710
|
+
}}
|
|
711
|
+
/>
|
|
712
|
+
```
|
|
713
|
+
|
|
714
|
+
| Option | Type | Default | Description |
|
|
715
|
+
| ------ | ---- | ------- | ----------- |
|
|
716
|
+
| `enableProgressBar` | `boolean` | `false` | Show progress bar during PDF loading |
|
|
717
|
+
|
|
718
|
+
The progress bar appears at the top of the PDF area and smoothly animates from 0% to 100% as the PDF loads.
|
|
719
|
+
|
|
720
|
+
### Text Selection & Copy
|
|
721
|
+
|
|
722
|
+
Enable the react-pdf text layer so users can select and copy text from PDF pages.
|
|
723
|
+
|
|
724
|
+
```tsx
|
|
725
|
+
<DocViewer
|
|
726
|
+
documents={docs}
|
|
727
|
+
pluginRenderers={DocViewerRenderers}
|
|
728
|
+
config={{
|
|
729
|
+
textSelection: { enableTextSelection: true },
|
|
730
|
+
}}
|
|
731
|
+
/>
|
|
732
|
+
```
|
|
733
|
+
|
|
734
|
+
| Option | Type | Default | Description |
|
|
735
|
+
| ------ | ---- | ------- | ----------- |
|
|
736
|
+
| `enableTextSelection` | `boolean` | `false` | Render PDF text layer for selection and copying |
|
|
737
|
+
|
|
738
|
+
When enabled, text on PDF pages becomes selectable. Use Ctrl+C / Cmd+C to copy selected text.
|
|
739
|
+
|
|
434
740
|
### Drag & Drop File Upload
|
|
435
741
|
|
|
436
742
|
Enable file drag-and-drop to add or replace documents in the viewer. Supports file type filtering, size limits, and callbacks.
|
|
@@ -578,12 +884,14 @@ const [page, setPage] = useState(1);
|
|
|
578
884
|
documents={docs}
|
|
579
885
|
pluginRenderers={DocViewerRenderers}
|
|
580
886
|
config={{
|
|
887
|
+
// Header
|
|
581
888
|
header: {
|
|
582
889
|
disableHeader: false,
|
|
583
890
|
disableFileName: false,
|
|
584
891
|
retainURLParams: false,
|
|
585
892
|
overrideComponent: MyHeader,
|
|
586
893
|
},
|
|
894
|
+
// Loading & error
|
|
587
895
|
loadingRenderer: {
|
|
588
896
|
overrideComponent: MyLoader,
|
|
589
897
|
showLoadingTimeout: 500,
|
|
@@ -591,12 +899,32 @@ const [page, setPage] = useState(1);
|
|
|
591
899
|
noRenderer: {
|
|
592
900
|
overrideComponent: MyError,
|
|
593
901
|
},
|
|
902
|
+
// PDF options
|
|
594
903
|
csvDelimiter: ",",
|
|
595
904
|
pdfZoom: {
|
|
596
905
|
defaultZoom: 1.1,
|
|
597
906
|
zoomJump: 0.2,
|
|
598
907
|
},
|
|
599
908
|
pdfVerticalScrollByDefault: true,
|
|
909
|
+
// Theme
|
|
910
|
+
themeMode: "dark", // "light" | "dark" | "auto"
|
|
911
|
+
// PDF features
|
|
912
|
+
print: { enablePrint: true },
|
|
913
|
+
fullscreen: { enableFullscreen: true },
|
|
914
|
+
loadingProgress: { enableProgressBar: true },
|
|
915
|
+
watermark: {
|
|
916
|
+
text: "CONFIDENTIAL",
|
|
917
|
+
opacity: 0.08,
|
|
918
|
+
fontSize: 52,
|
|
919
|
+
color: "#ff0000",
|
|
920
|
+
rotation: -35,
|
|
921
|
+
},
|
|
922
|
+
textSelection: { enableTextSelection: true },
|
|
923
|
+
keyboard: { enableKeyboardShortcuts: true },
|
|
924
|
+
password: { enablePasswordPrompt: true },
|
|
925
|
+
search: { enableSearch: true },
|
|
926
|
+
bookmarks: { enableBookmarks: true },
|
|
927
|
+
// Existing features
|
|
600
928
|
dragDrop: {
|
|
601
929
|
enableDragDrop: true,
|
|
602
930
|
acceptedFileTypes: ["application/pdf", "image/*"],
|
|
@@ -768,8 +1096,18 @@ All internal elements use `.rdv-*` class names that you can target:
|
|
|
768
1096
|
| `.rdv-doc-nav-prev` / `.rdv-doc-nav-next` | Document navigation buttons |
|
|
769
1097
|
| `.rdv-pdf-controls` | PDF control bar (zoom, pagination) |
|
|
770
1098
|
| `.rdv-pdf-page-wrapper` | Individual PDF page wrapper |
|
|
1099
|
+
| `.rdv-pdf-progress-bar` | Loading progress bar container |
|
|
1100
|
+
| `.rdv-pdf-progress-fill` | Loading progress bar fill |
|
|
771
1101
|
| `.rdv-thumbnail-sidebar` | Thumbnail sidebar container |
|
|
772
1102
|
| `.rdv-annotation-toolbar` | Annotation toolbar |
|
|
1103
|
+
| `.rdv-search-bar` | Text search floating bar |
|
|
1104
|
+
| `.rdv-bookmarks-sidebar` | Bookmarks / TOC sidebar |
|
|
1105
|
+
| `.rdv-password-overlay` | Password prompt overlay |
|
|
1106
|
+
| `.rdv-password-modal` | Password prompt modal |
|
|
1107
|
+
| `.rdv-watermark-overlay` | Watermark overlay container |
|
|
1108
|
+
| `.rdv-split-container` | Split view container |
|
|
1109
|
+
| `.rdv-split-panel` | Split view panel |
|
|
1110
|
+
| `.rdv-split-divider` | Split view draggable divider |
|
|
773
1111
|
| `.rdv-image-container` | Image renderer container |
|
|
774
1112
|
| `.rdv-csv-container` | CSV table container |
|
|
775
1113
|
| `.rdv-txt-container` | Text renderer container |
|
|
@@ -830,6 +1168,7 @@ const DocViewer = React.lazy(() => import("@iamjariwala/react-doc-viewer"));
|
|
|
830
1168
|
- **No external services** -- All document rendering happens client-side. No file data is sent to third-party servers.
|
|
831
1169
|
- **No external iframes** -- MS Office documents render as local download cards instead of being sent to Microsoft's viewing service.
|
|
832
1170
|
- **Sandboxed HTML** -- HTML documents render inside an iframe with sanitized content.
|
|
1171
|
+
- **Watermark protection** -- Add visible watermarks to discourage unauthorized distribution of confidential documents.
|
|
833
1172
|
|
|
834
1173
|
## Advanced
|
|
835
1174
|
|
|
@@ -882,7 +1221,7 @@ Provide custom headers for authenticated requests (JWT, API keys, etc.):
|
|
|
882
1221
|
## FAQ
|
|
883
1222
|
|
|
884
1223
|
**What is the best React document viewer library?**
|
|
885
|
-
`@iamjariwala/react-doc-viewer` is the most feature-complete open-source React document viewer. It supports 20+ file types (PDF, Word, Excel, PowerPoint, images, video, CSV, HTML, and more) in a single component with
|
|
1224
|
+
`@iamjariwala/react-doc-viewer` is the most feature-complete open-source React document viewer. It supports 20+ file types (PDF, Word, Excel, PowerPoint, images, video, CSV, HTML, and more) in a single component with dark mode, text search, annotations, keyboard shortcuts, watermarks, bookmarks, password-protected PDF support, fullscreen, print, split view, drag-and-drop, thumbnails, theming, and i18n -- features that most alternatives require paid licenses or multiple libraries to achieve.
|
|
886
1225
|
|
|
887
1226
|
**How do I display a PDF in React?**
|
|
888
1227
|
Install `@iamjariwala/react-doc-viewer`, import `DocViewer` and `DocViewerRenderers`, pass your PDF URL as a document, and the component handles rendering, zoom, pagination, and page navigation automatically. See [Quick Start](#quick-start).
|
|
@@ -893,6 +1232,27 @@ Add the `"use client"` directive to your component, import `DocViewer` with the
|
|
|
893
1232
|
**Can I view Word, Excel, and PowerPoint files in React?**
|
|
894
1233
|
Yes. This library recognizes `.doc`, `.docx`, `.xls`, `.xlsx`, `.ppt`, and `.pptx` files and renders them as download cards showing file name, type, and a download link. No external service or public URL is required. For inline rendering, you can create a [Custom Renderer](#custom-renderer).
|
|
895
1234
|
|
|
1235
|
+
**Does it support dark mode?**
|
|
1236
|
+
Yes. Set `config.themeMode` to `"dark"` for dark mode, `"light"` for light mode, or `"auto"` to follow the system's `prefers-color-scheme` preference. Dark mode applies to the toolbar, header, sidebars, modals, and all UI elements.
|
|
1237
|
+
|
|
1238
|
+
**Does it support text search in PDFs?**
|
|
1239
|
+
Yes. Enable `config.search.enableSearch` to add a search icon to the toolbar. Press Ctrl+F to open the search bar, which searches across all pages with match count and prev/next navigation.
|
|
1240
|
+
|
|
1241
|
+
**Does it support keyboard shortcuts?**
|
|
1242
|
+
Yes. Enable `config.keyboard.enableKeyboardShortcuts` for arrow key page navigation, +/- zoom, Home/End, Ctrl+F search, Ctrl+P print, F for fullscreen, and Escape to exit.
|
|
1243
|
+
|
|
1244
|
+
**Can I add a watermark to PDFs?**
|
|
1245
|
+
Yes. Set `config.watermark` with your desired text, opacity, color, font size, and rotation. The watermark appears on every page as a non-interactive overlay.
|
|
1246
|
+
|
|
1247
|
+
**Does it support password-protected PDFs?**
|
|
1248
|
+
Yes. Enable `config.password.enablePasswordPrompt` to show a password prompt modal when an encrypted PDF is loaded. The user enters their password to decrypt and view the document.
|
|
1249
|
+
|
|
1250
|
+
**Can I view bookmarks or table of contents in a PDF?**
|
|
1251
|
+
Yes. Enable `config.bookmarks.enableBookmarks` to show a bookmarks sidebar that auto-extracts the PDF's outline with nested items and click-to-navigate.
|
|
1252
|
+
|
|
1253
|
+
**Can I compare two documents side by side?**
|
|
1254
|
+
Yes. Use the `<SplitDocViewer>` component with `left` and `right` props. Each side gets its own DocViewer instance. Optional `syncScroll` keeps both sides in sync.
|
|
1255
|
+
|
|
896
1256
|
**Does it support annotations and highlighting?**
|
|
897
1257
|
Yes. Enable annotations via config to get text highlighting, freehand drawing, comments, and an eraser tool. Annotations can be exported as JSON and pre-loaded from saved data. See [Annotations](#annotations-highlight-draw-comment).
|
|
898
1258
|
|
|
@@ -915,7 +1275,7 @@ Use the `theme` prop for color customization, the `className` or `style` props f
|
|
|
915
1275
|
No data leaves the browser. All rendering is client-side. HTML content is sanitized with DOMPurify to prevent XSS. MS Office files render locally as download cards -- no Microsoft iframe. See [Security](#security).
|
|
916
1276
|
|
|
917
1277
|
**How does this compare to react-pdf?**
|
|
918
|
-
react-pdf only handles PDF files. `@iamjariwala/react-doc-viewer` handles 20+ file types including PDF, and adds drag-and-drop,
|
|
1278
|
+
react-pdf only handles PDF files. `@iamjariwala/react-doc-viewer` handles 20+ file types including PDF, and adds dark mode, text search, annotations, keyboard shortcuts, watermarks, bookmarks, password support, fullscreen, print, split view, drag-and-drop, thumbnails, theming, and i18n on top. If you only need PDF rendering, react-pdf is lighter. If you need multi-format support or advanced features, this library covers more ground.
|
|
919
1279
|
|
|
920
1280
|
**How do I reduce bundle size?**
|
|
921
1281
|
Import only the renderers you need (`PDFRenderer`, `PNGRenderer`, etc.) instead of `DocViewerRenderers`. Use `React.lazy()` to code-split the viewer. See [Performance](#performance--bundle-size).
|
|
@@ -929,6 +1289,12 @@ Yes. Enable `config.thumbnail.enableThumbnails` to show a sidebar with page thum
|
|
|
929
1289
|
**Can I jump to a specific page in a PDF?**
|
|
930
1290
|
Yes. Use `docViewerRef.current?.goToPage(5)` for programmatic navigation, or the `jumpToPage` prop for declarative control. See [Page Navigation](#page-navigation--page-jump).
|
|
931
1291
|
|
|
1292
|
+
**Can I print a PDF from the viewer?**
|
|
1293
|
+
Yes. Enable `config.print.enablePrint` to add a print button to the toolbar. Press Ctrl+P with keyboard shortcuts enabled.
|
|
1294
|
+
|
|
1295
|
+
**Does it support fullscreen mode?**
|
|
1296
|
+
Yes. Enable `config.fullscreen.enableFullscreen` to add a fullscreen button. Press F with keyboard shortcuts enabled.
|
|
1297
|
+
|
|
932
1298
|
**Does it support TypeScript?**
|
|
933
1299
|
Yes. The library is written in TypeScript and ships with complete type definitions. All props, config options, and hooks are fully typed with IntelliSense support.
|
|
934
1300
|
|