;
};
;
```
## Theming & CSS Variables
Customize the viewer's appearance with a theme object. Values are injected as CSS custom properties (`--rdv-*`) on the container element.
```tsx
```
| Property | CSS Variable | Default | Description |
| -------- | ------------ | ------- | ----------- |
| `primary` | `--rdv-primary` | `"#fff"` | Primary background color |
| `secondary` | `--rdv-secondary` | `"#000"` | Secondary background color |
| `tertiary` | `--rdv-tertiary` | `"#ffffff99"` | Tertiary background color |
| `textPrimary` | `--rdv-text-primary` | `"#000"` | Primary text color |
| `textSecondary` | `--rdv-text-secondary` | `"#fff"` | Secondary text color |
| `textTertiary` | `--rdv-text-tertiary` | `"#00000044"` | Tertiary text color |
| `disableThemeScrollbar` | -- | `false` | Disable themed scrollbar styling |
## Styling & CSS Customization
**CSS class:**
```tsx
```
**Inline styles:**
```tsx
```
**Override internal elements with CSS classes:**
All internal elements use `.rdv-*` class names that you can target:
```css
.rdv-container {
border-radius: 10px;
}
.rdv-header-bar {
background-color: #faf;
}
.rdv-pdf-controls {
gap: 12px;
}
```
**Override CSS custom properties globally:**
```css
#react-doc-viewer {
--rdv-primary: #1a1a2e;
--rdv-secondary: #16213e;
--rdv-text-primary: #e94560;
}
```
**Common CSS class reference:**
| Class | Element |
| ----- | ------- |
| `.rdv-container` | Root container |
| `.rdv-header-bar` | Top header bar |
| `.rdv-file-name` | File name display |
| `.rdv-doc-nav-prev` / `.rdv-doc-nav-next` | Document navigation buttons |
| `.rdv-pdf-controls` | PDF control bar (zoom, pagination) |
| `.rdv-pdf-page-wrapper` | Individual PDF page wrapper |
| `.rdv-pdf-progress-bar` | Loading progress bar container |
| `.rdv-pdf-progress-fill` | Loading progress bar fill |
| `.rdv-thumbnail-sidebar` | Thumbnail sidebar container |
| `.rdv-annotation-toolbar` | Annotation toolbar |
| `.rdv-search-bar` | Text search floating bar |
| `.rdv-bookmarks-sidebar` | Bookmarks / TOC sidebar |
| `.rdv-password-overlay` | Password prompt overlay |
| `.rdv-password-modal` | Password prompt modal |
| `.rdv-watermark-overlay` | Watermark overlay container |
| `.rdv-split-container` | Split view container |
| `.rdv-split-panel` | Split view panel |
| `.rdv-split-divider` | Split view draggable divider |
| `.rdv-image-container` | Image renderer container |
| `.rdv-csv-container` | CSV table container |
| `.rdv-txt-container` | Text renderer container |
| `.rdv-video-container` | Video player container |
| `.rdv-msdoc-container` | Office document download card |
| `.rdv-loading-container` | Loading spinner container |
## Internationalization (i18n) -- 14 Languages
Pass a `language` prop to translate the UI into any of the 14 supported languages:
```tsx
```
**Supported languages:**
| Code | Language | Code | Language |
| ---- | -------- | ---- | -------- |
| `en` | English | `ja` | Japanese |
| `ar` | Arabic | `pl` | Polish |
| `de` | German | `pt` | Portuguese |
| `es` | Spanish | `ru` | Russian |
| `fr` | French | `se` | Swedish |
| `it` | Italian | `sr` | Serbian (Latin) |
| `tr` | Turkish | `sr_cyr` | Serbian (Cyrillic) |
Translation files are in `src/locales/`. PRs for new languages are welcome.
## Performance & Bundle Size
v1.1.0 significantly reduced bundle size by removing heavy dependencies:
| Dependency removed | Size saved |
| ------------------ | ---------- |
| `styled-components` | ~160KB minified |
| `core-js` | ~150KB minified |
| `ajv` | ~70KB minified |
| **Total savings** | **~380KB** |
**Optimization tips:**
- **Tree-shake renderers** -- Import only the renderers you need instead of `DocViewerRenderers`
- **Lazy load the viewer** -- Use `React.lazy()` to code-split the viewer into its own chunk
- **Set dimensions** -- Always give the viewer explicit `width` and `height` via `style` prop to prevent layout shifts
```tsx
const DocViewer = React.lazy(() => import("@iamjariwala/react-doc-viewer"));
Loading viewer...}>
```
## Security
- **HTML sanitization** -- All HTML content is sanitized with [DOMPurify](https://github.com/cure53/DOMPurify) before rendering. Script tags, object embeds, and form elements are stripped.
- **No external services** -- All document rendering happens client-side. No file data is sent to third-party servers.
- **No external iframes** -- MS Office documents render as local download cards instead of being sent to Microsoft's viewing service.
- **Sandboxed HTML** -- HTML documents render inside an iframe with sanitized content.
- **Watermark protection** -- Add visible watermarks to discourage unauthorized distribution of confidential documents.
## Advanced
### DocViewerRef API
Control the viewer programmatically:
```tsx
import DocViewer, { DocViewerRef } from "@iamjariwala/react-doc-viewer";
const docViewerRef = useRef(null);
;
docViewerRef.current?.prev();
docViewerRef.current?.next();
docViewerRef.current?.goToPage(3);
```
| Method | Description |
| ------ | ----------- |
| `prev()` | Navigate to the previous document |
| `next()` | Navigate to the next document |
| `goToPage(n)` | Jump to page `n` in the current PDF |
### Custom HTTP Verb for S3 / Cloud Storage
Some services (like AWS S3 pre-signed URLs) require a specific HTTP verb for pre-fetching. By default, `HEAD` is used:
```tsx
```
### Custom Request Headers for Authenticated APIs
Provide custom headers for authenticated requests (JWT, API keys, etc.):
```tsx
```
## FAQ
**What is the best React document viewer library?**
`@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.
**How do I display a PDF in React?**
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).
**How do I display a PDF in Next.js?**
Add the `"use client"` directive to your component, import `DocViewer` with the CSS file, and pass your PDF document. Works with both App Router and Pages Router. See [Next.js guide](#nextjs-app-router--pages-router).
**Can I view Word, Excel, and PowerPoint files in React?**
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).
**Does it support dark mode?**
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.
**Does it support text search in PDFs?**
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.
**Does it support keyboard shortcuts?**
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.
**Can I add a watermark to PDFs?**
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.
**Does it support password-protected PDFs?**
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.
**Can I view bookmarks or table of contents in a PDF?**
Yes. Enable `config.bookmarks.enableBookmarks` to show a bookmarks sidebar that auto-extracts the PDF's outline with nested items and click-to-navigate.
**Can I compare two documents side by side?**
Yes. Use the `` component with `left` and `right` props. Each side gets its own DocViewer instance. Optional `syncScroll` keeps both sides in sync.
**Does it support annotations and highlighting?**
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).
**Can I annotate a PDF in React?**
Yes. Enable `config.annotations.enableAnnotations` to get a full annotation toolbar with highlighting, freehand drawing, comments, color picker, and eraser. Annotations are per-page and can be exported/imported as JSON.
**Does it work with Next.js?**
Yes. The library works with Next.js (App Router and Pages Router), Vite, Create React App, Remix, Gatsby, and any React 17+ project. See [Framework Guides](#framework-guides).
**Does it work with Vite?**
Yes. Import the component and CSS file -- no additional configuration needed. See [Vite guide](#vite).
**Can I add my own file type renderer?**
Yes. Create a custom renderer component with `fileTypes` and `weight` properties and pass it via `pluginRenderers`. You can also override the file loading logic. See [Custom Renderer](#custom-renderer).
**How do I style or theme the document viewer?**
Use the `theme` prop for color customization, the `className` or `style` props for container styling, or override `.rdv-*` CSS classes and `--rdv-*` CSS custom properties for fine-grained control. See [Theming](#theming--css-variables) and [Styling](#styling--css-customization).
**Is it secure? Does it send data to external servers?**
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).
**How does this compare to react-pdf?**
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.
**How do I reduce bundle size?**
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).
**Does it support drag-and-drop file upload?**
Yes. Enable `config.dragDrop.enableDragDrop` to allow users to drag files onto the viewer. Supports file type filtering, size limits, append/replace behavior, and rejection callbacks. See [Drag & Drop](#drag--drop-file-upload).
**Does it support thumbnail navigation?**
Yes. Enable `config.thumbnail.enableThumbnails` to show a sidebar with page thumbnails for PDFs. Click any thumbnail to jump to that page. See [Thumbnail Sidebar](#thumbnail-sidebar).
**Can I jump to a specific page in a PDF?**
Yes. Use `docViewerRef.current?.goToPage(5)` for programmatic navigation, or the `jumpToPage` prop for declarative control. See [Page Navigation](#page-navigation--page-jump).
**Can I print a PDF from the viewer?**
Yes. Enable `config.print.enablePrint` to add a print button to the toolbar. Press Ctrl+P with keyboard shortcuts enabled.
**Does it support fullscreen mode?**
Yes. Enable `config.fullscreen.enableFullscreen` to add a fullscreen button. Press F with keyboard shortcuts enabled.
**Does it support TypeScript?**
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.
**What React versions are supported?**
React 17, 18, and 19 are supported via `peerDependencies: "react": ">=17.0.0"`.
**Is it accessible?**
The viewer uses semantic HTML, keyboard-navigable controls, and appropriate ARIA attributes where applicable.
## Migrating from Other Libraries
### From @cyntler/react-doc-viewer
`@iamjariwala/react-doc-viewer` is a fork of `@cyntler/react-doc-viewer` with additional features. Migration is straightforward:
1. Replace the package: `npm uninstall @cyntler/react-doc-viewer && npm install @iamjariwala/react-doc-viewer`
2. Update imports: replace `@cyntler/react-doc-viewer` with `@iamjariwala/react-doc-viewer`
3. Add the CSS import: `import "@iamjariwala/react-doc-viewer/dist/index.css"`
4. All existing props and config options are compatible
### From react-pdf
If you're using `react-pdf` and need multi-format support:
1. Install: `npm install @iamjariwala/react-doc-viewer`
2. Replace `` + `` with ``
3. The built-in PDF renderer handles zoom, pagination, and page navigation automatically
### From react-file-viewer
1. Install: `npm install @iamjariwala/react-doc-viewer`
2. Replace `` with ``
3. File type is detected automatically from the URL or can be specified via `fileType` property
## Contributing
Contributions are welcome. Please open an issue first to discuss significant changes. PRs for bug fixes, new renderers, and translations are appreciated.
```bash
git clone https://github.com/mehuljariwala/react-doc-viewer.git
cd react-doc-viewer
npm install
npm start
```
## License
[Apache-2.0](./LICENSE)
---
Forked from [@cyntler/react-doc-viewer](https://github.com/cyntler/react-doc-viewer). Built and maintained by [Mehul Jariwala](https://github.com/mehuljariwala).