pdf-tsx 0.1.0 → 0.1.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 +19 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -18,18 +18,26 @@ npm install react react-dom pdfjs-dist
|
|
|
18
18
|
|
|
19
19
|
## Quick start
|
|
20
20
|
|
|
21
|
+
`PDFViewer` requires a `workerSrc` prop — the URL of the pdfjs worker script. The easiest way is to serve it from the `pdfjs-dist` package directly:
|
|
22
|
+
|
|
21
23
|
```tsx
|
|
22
24
|
import { PDFViewer } from 'pdf-tsx'
|
|
25
|
+
import workerUrl from 'pdfjs-dist/build/pdf.worker.min.mjs?url'
|
|
23
26
|
|
|
24
27
|
function App() {
|
|
25
28
|
const [file, setFile] = useState<File | null>(null)
|
|
26
29
|
|
|
27
30
|
if (!file) return <input type="file" accept=".pdf" onChange={e => setFile(e.target.files![0])} />
|
|
28
31
|
|
|
29
|
-
return <PDFViewer file={file} />
|
|
32
|
+
return <PDFViewer file={file} workerSrc={workerUrl} />
|
|
30
33
|
}
|
|
31
34
|
```
|
|
32
35
|
|
|
36
|
+
> The `?url` suffix is a Vite feature that returns the asset URL as a string. If you use a different bundler, import the worker URL accordingly or pass a CDN URL:
|
|
37
|
+
> ```ts
|
|
38
|
+
> workerSrc="https://unpkg.com/pdfjs-dist@5/build/pdf.worker.min.mjs"
|
|
39
|
+
> ```
|
|
40
|
+
|
|
33
41
|
---
|
|
34
42
|
|
|
35
43
|
## Icons
|
|
@@ -51,18 +59,20 @@ The main component. Must wrap all feature components.
|
|
|
51
59
|
```tsx
|
|
52
60
|
<PDFViewer
|
|
53
61
|
file={file}
|
|
62
|
+
workerSrc={workerUrl}
|
|
54
63
|
sidebar={<PDFSidebar panels={[...]} />}
|
|
55
64
|
toolbar={<>...</>}
|
|
56
65
|
onChangeFile={(newFile) => setFile(newFile)}
|
|
57
66
|
/>
|
|
58
67
|
```
|
|
59
68
|
|
|
60
|
-
| Prop | Type | Required | Description
|
|
61
|
-
|
|
62
|
-
| `file` | `File` | yes | The PDF file object to display
|
|
63
|
-
| `
|
|
64
|
-
| `
|
|
65
|
-
| `
|
|
69
|
+
| Prop | Type | Required | Description |
|
|
70
|
+
|----------------|------------------------|----------|------------------------------------------------------|
|
|
71
|
+
| `file` | `File` | yes | The PDF file object to display |
|
|
72
|
+
| `workerSrc` | `string` | yes | URL of the pdfjs worker script (see Quick start) |
|
|
73
|
+
| `sidebar` | `ReactNode` | no | Content rendered on the left side |
|
|
74
|
+
| `toolbar` | `ReactNode` | no | Content rendered in the top toolbar |
|
|
75
|
+
| `onChangeFile` | `(file: File) => void` | no | Called when the user opens a different file |
|
|
66
76
|
|
|
67
77
|
---
|
|
68
78
|
|
|
@@ -132,6 +142,7 @@ import {
|
|
|
132
142
|
FiChevronLeft, FiChevronRight, FiDownload, FiFolderPlus,
|
|
133
143
|
FiPrinter, FiSun, FiMoon,
|
|
134
144
|
} from 'react-icons/fi'
|
|
145
|
+
import workerUrl from 'pdfjs-dist/build/pdf.worker.min.mjs?url'
|
|
135
146
|
|
|
136
147
|
const PDFViewer = lazy(() => import('pdf-tsx').then(m => ({ default: m.PDFViewer })))
|
|
137
148
|
|
|
@@ -152,6 +163,7 @@ function App() {
|
|
|
152
163
|
<Suspense fallback={<div>Loading...</div>}>
|
|
153
164
|
<PDFViewer
|
|
154
165
|
file={file}
|
|
166
|
+
workerSrc={workerUrl}
|
|
155
167
|
onChangeFile={setFile}
|
|
156
168
|
sidebar={
|
|
157
169
|
<PDFSidebar panels={[
|