@embedpdf/react-pdf-viewer 2.0.0 → 2.0.2

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.
Files changed (2) hide show
  1. package/README.md +157 -53
  2. package/package.json +4 -3
package/README.md CHANGED
@@ -1,8 +1,45 @@
1
- # @embedpdf/react-pdf-viewer
1
+ <div align="center">
2
+ <a href="https://www.embedpdf.com/react-pdf-viewer">
3
+ <img alt="EmbedPDF logo" src="https://www.embedpdf.com/logo-192.png" height="96">
4
+ </a>
2
5
 
3
- React component for embedding PDF documents with full-featured viewing capabilities.
6
+ <h1>React PDF Viewer</h1>
7
+ <p>The easiest way to embed PDF files in your React application with a complete, ready‑to‑use interface.</p>
4
8
 
5
- ## Installation
9
+ <a href="https://www.embedpdf.com/react-pdf-viewer"><img alt="Documentation" src="https://img.shields.io/badge/View%20Docs-0af?style=for-the-badge&labelColor=000000"></a>
10
+ <a href="https://app.embedpdf.com/"><img alt="Live Demo" src="https://img.shields.io/badge/Try%20Live%20Demo-ff1493.svg?style=for-the-badge&labelColor=000000"></a>
11
+ <a href="https://www.npmjs.com/package/@embedpdf/react-pdf-viewer"><img alt="NPM Version" src="https://img.shields.io/npm/v/@embedpdf/react-pdf-viewer?style=for-the-badge&labelColor=000000&color=blue"></a>
12
+
13
+ </div>
14
+
15
+ ---
16
+
17
+ ## 📚 Documentation
18
+
19
+ The full walkthrough, advanced examples, and API reference live in our docs site:
20
+
21
+ 👉 **[https://www.embedpdf.com/react-pdf-viewer](https://www.embedpdf.com/react-pdf-viewer)**
22
+
23
+ ---
24
+
25
+ ## 🚀 Introduction
26
+
27
+ The `@embedpdf/react-pdf-viewer` package provides a complete, production-ready PDF viewing experience for React applications.
28
+
29
+ It is designed to be the fastest way to get a high-quality PDF viewer into your app. You don't need to build toolbars, handle layout logic, or worry about CSS—it just works.
30
+
31
+ ### Key Features
32
+
33
+ - **Ready-to-use UI** — Includes a polished toolbar, sidebar, and thumbnails.
34
+ - **Responsive** — Adapts seamlessly to mobile and desktop screens.
35
+ - **Themable** — Built-in light/dark modes and support for custom brand colors.
36
+ - **Configurable** — Easily disable features you don't need (e.g., printing or downloading).
37
+ - **TypeScript** — Fully typed for a great developer experience.
38
+ - **Next.js Ready** — Works flawlessly with Next.js App Router and SSR.
39
+
40
+ ---
41
+
42
+ ## 📦 Installation
6
43
 
7
44
  ```bash
8
45
  npm install @embedpdf/react-pdf-viewer
@@ -12,50 +49,114 @@ pnpm add @embedpdf/react-pdf-viewer
12
49
  yarn add @embedpdf/react-pdf-viewer
13
50
  ```
14
51
 
15
- ## Usage
52
+ ---
53
+
54
+ ## 🛠 Basic Usage
55
+
56
+ Import the `PDFViewer` component and render it with a PDF source.
16
57
 
17
58
  ```tsx
18
59
  import { PDFViewer } from '@embedpdf/react-pdf-viewer';
19
60
 
20
- function App() {
61
+ export default function App() {
21
62
  return (
22
- <PDFViewer
23
- config={{
24
- src: '/document.pdf',
25
- theme: { preference: 'system' },
26
- zoom: { defaultLevel: 'fit-width' },
27
- }}
28
- style={{ width: '100%', height: '100vh' }}
29
- onReady={(registry) => {
30
- console.log('PDF viewer ready', registry);
31
- }}
32
- />
63
+ <div style={{ height: '100vh' }}>
64
+ <PDFViewer
65
+ config={{
66
+ src: 'https://snippet.embedpdf.com/ebook.pdf',
67
+ theme: { preference: 'light' },
68
+ }}
69
+ />
70
+ </div>
33
71
  );
34
72
  }
35
73
  ```
36
74
 
37
- ## Props
75
+ That's it! You now have a fully functional PDF viewer.
38
76
 
39
- | Prop | Type | Description |
40
- | ----------- | --------------------- | ---------------------------------------- |
41
- | `config` | `PDFViewerConfig` | Full configuration object for the viewer |
42
- | `className` | `string` | CSS class name for the container |
43
- | `style` | `CSSProperties` | Inline styles for the container |
44
- | `onInit` | `(container) => void` | Callback when viewer is initialized |
45
- | `onReady` | `(registry) => void` | Callback when registry is ready |
77
+ ### Next.js App Router
78
+
79
+ The component works seamlessly with Next.js. Since it uses browser APIs (Canvas, WebAssembly), make sure to use it in a **Client Component**:
80
+
81
+ ```tsx
82
+ 'use client';
46
83
 
47
- The `config` prop accepts all configuration options from `@embedpdf/snippet`, including:
84
+ import { PDFViewer } from '@embedpdf/react-pdf-viewer';
48
85
 
49
- - `src` - URL or path to the PDF document
50
- - `theme` - Theme configuration
51
- - `zoom` - Zoom configuration
52
- - `scroll` - Scroll configuration
53
- - `annotations` - Annotation configuration
54
- - And more...
86
+ export default function ViewerPage() {
87
+ return (
88
+ <div style={{ height: '100vh' }}>
89
+ <PDFViewer
90
+ config={{
91
+ src: 'https://snippet.embedpdf.com/ebook.pdf',
92
+ }}
93
+ />
94
+ </div>
95
+ );
96
+ }
97
+ ```
55
98
 
56
- ## Accessing the Registry
99
+ ---
57
100
 
58
- Use a ref to access the viewer container and registry:
101
+ ## 🎨 Customization
102
+
103
+ ### Theme
104
+
105
+ The viewer includes a robust theming system. You can set the preference to `'light'`, `'dark'`, or `'system'`, and even override specific colors to match your brand.
106
+
107
+ ```tsx
108
+ <PDFViewer
109
+ config={{
110
+ src: '/document.pdf',
111
+ theme: {
112
+ preference: 'system',
113
+ light: {
114
+ accent: {
115
+ primary: '#9333ea', // Custom brand color (Purple)
116
+ },
117
+ },
118
+ },
119
+ }}
120
+ />
121
+ ```
122
+
123
+ ### Disabling Features
124
+
125
+ Easily customize the UI by disabling features you don't need via the `disabledCategories` option:
126
+
127
+ ```tsx
128
+ <PDFViewer
129
+ config={{
130
+ src: '/document.pdf',
131
+ disabledCategories: ['annotation', 'print', 'export'],
132
+ }}
133
+ />
134
+ ```
135
+
136
+ Available categories include: `zoom`, `annotation`, `redaction`, `document`, `page`, `panel`, `tools`, `selection`, and `history`.
137
+
138
+ ---
139
+
140
+ ## ⚙️ Configuration Options
141
+
142
+ The `config` prop accepts the following top-level options:
143
+
144
+ | Option | Type | Description |
145
+ | :------------------- | :---------------------------------- | :--------------------------------------------- |
146
+ | `src` | `string` | URL or path to the PDF document. |
147
+ | `theme` | `object` | Theme configuration (preference, overrides). |
148
+ | `tabBar` | `'always' \| 'multiple' \| 'never'` | Control visibility of the document tab bar. |
149
+ | `disabledCategories` | `string[]` | Hide specific UI features by category. |
150
+ | `i18n` | `object` | Configure locales and translations. |
151
+ | `annotations` | `object` | Configure annotation defaults (author, tools). |
152
+ | `zoom` | `object` | Configure default zoom levels and limits. |
153
+ | `scroll` | `object` | Configure scroll direction and logic. |
154
+
155
+ ---
156
+
157
+ ## 🔌 Accessing the Engine & Registry
158
+
159
+ For advanced use cases, you can access the underlying PDFium engine or the plugin registry using a ref.
59
160
 
60
161
  ```tsx
61
162
  import { useRef } from 'react';
@@ -64,38 +165,41 @@ import { PDFViewer, PDFViewerRef } from '@embedpdf/react-pdf-viewer';
64
165
  function App() {
65
166
  const viewerRef = useRef<PDFViewerRef>(null);
66
167
 
67
- const handleClick = async () => {
168
+ const getMetadata = async () => {
169
+ // Access the plugin registry
68
170
  const registry = await viewerRef.current?.registry;
69
- // Use registry to access plugins
171
+ if (!registry) return;
172
+
173
+ // Access the engine directly
174
+ const engine = registry.getEngine();
175
+ console.log('Engine ready:', engine);
70
176
  };
71
177
 
72
178
  return (
73
179
  <>
74
- <PDFViewer
75
- ref={viewerRef}
76
- config={{ src: '/document.pdf' }}
77
- style={{ width: '100%', height: '100vh' }}
78
- />
79
- <button onClick={handleClick}>Get Registry</button>
180
+ <button onClick={getMetadata}>Get Metadata</button>
181
+ <PDFViewer ref={viewerRef} config={{ src: '/doc.pdf' }} />
80
182
  </>
81
183
  );
82
184
  }
83
185
  ```
84
186
 
85
- ## Re-exports
187
+ ---
86
188
 
87
- This package re-exports everything from `@embedpdf/snippet`, so you can import types and utilities directly:
189
+ ## 🧩 Headless Mode
88
190
 
89
- ```tsx
90
- import {
91
- PDFViewer,
92
- ZoomPlugin,
93
- ScrollPlugin,
94
- type PDFViewerConfig,
95
- type PluginRegistry,
96
- } from '@embedpdf/react-pdf-viewer';
191
+ Need complete control over the UI? Building a custom design system?
192
+
193
+ Check out our **Headless Components** which provide hooks and logic without the UI:
194
+
195
+ ```bash
196
+ npm install @embedpdf/core @embedpdf/plugin-zoom ...
97
197
  ```
98
198
 
99
- ## License
199
+ Read the [Headless Documentation](https://www.embedpdf.com/docs/react/headless/introduction) for more details.
200
+
201
+ ---
202
+
203
+ ## 📄 License
100
204
 
101
- MIT
205
+ EmbedPDF is [MIT licensed](https://github.com/embedpdf/embed-pdf-viewer/blob/main/LICENSE). Commercial use is welcome—just keep the copyright headers intact.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@embedpdf/react-pdf-viewer",
3
- "version": "2.0.0",
3
+ "version": "2.0.2",
4
4
  "description": "React component for embedding PDF documents",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",
@@ -8,6 +8,7 @@
8
8
  "license": "MIT",
9
9
  "type": "module",
10
10
  "sideEffects": false,
11
+ "homepage": "https://www.embedpdf.com/react-pdf-viewer",
11
12
  "exports": {
12
13
  ".": {
13
14
  "types": "./dist/index.d.ts",
@@ -20,12 +21,12 @@
20
21
  "README.md"
21
22
  ],
22
23
  "dependencies": {
23
- "@embedpdf/snippet": "2.0.0"
24
+ "@embedpdf/snippet": "2.0.2"
24
25
  },
25
26
  "devDependencies": {
26
27
  "@types/react": "^18.2.0",
27
28
  "@types/react-dom": "^18.2.0",
28
- "rimraf": "^5.0.5",
29
+ "rimraf": "^6.1.2",
29
30
  "typescript": "^5.1.6",
30
31
  "unplugin-dts": "1.0.0-beta.6",
31
32
  "vite": "^6.3.5"