react-web-pdf-editor 0.1.4 → 0.1.5
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 +18 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
View and edit PDFs in the browser with React. Open a file, annotate it, change the page order, and export a new PDF. Rendering uses [PDF.js](https://mozilla.github.io/pdf.js/). Export uses [pdf-lib](https://pdf-lib.js.org/).
|
|
4
4
|
|
|
5
|
+
[Live demos](https://react-web-pdf-editor-demo.vercel.app/) open the same sample PDF three ways: a direct client import, a browser-only dynamic import, and a toolbar you render yourself.
|
|
6
|
+
|
|
5
7
|
The editor includes:
|
|
6
8
|
|
|
7
9
|
- Continuous page viewing, zoom, and in-document search
|
|
@@ -13,6 +15,18 @@ The editor includes:
|
|
|
13
15
|
|
|
14
16
|
Annotations stay in memory until you export. Changing the `file` prop starts a fresh document and clears them.
|
|
15
17
|
|
|
18
|
+
## Demos
|
|
19
|
+
|
|
20
|
+
The [examples site](https://react-web-pdf-editor-demo.vercel.app/) loads `/file/compressed.tracemonkey-pldi-09.pdf` on every route. Replace that URL with your own PDF when you copy the code.
|
|
21
|
+
|
|
22
|
+
| Example | Live page | What it shows |
|
|
23
|
+
| --- | --- | --- |
|
|
24
|
+
| Quick start | [/quick-start](https://react-web-pdf-editor-demo.vercel.app/quick-start) | A client component imports `PdfEditor`, loads the stylesheet, and opens a PDF with a document name and a full-viewport height (`file`, `name`, and `style`). |
|
|
25
|
+
| Basic demo | [/basic-demo](https://react-web-pdf-editor-demo.vercel.app/basic-demo) | `next/dynamic` loads `PdfEditor` with `ssr: false`, so canvas, `window`, and the PDF.js worker run in the browser. Safe to render from an App Router page. |
|
|
26
|
+
| Custom toolbar | [/custom](https://react-web-pdf-editor-demo.vercel.app/custom) | A `toolbar` render prop. The bar renames the document, switches tools, and exports through `ToolbarApi`. |
|
|
27
|
+
|
|
28
|
+
The custom toolbar covers select, draw, highlight, text, image, and signature, plus undo, redo, zoom, pages, search, and export. The [quick start](#quick-start), [Next.js](#nextjs), and [custom toolbar](#custom-toolbar) sections below are those same patterns.
|
|
29
|
+
|
|
16
30
|
## Install
|
|
17
31
|
|
|
18
32
|
```bash
|
|
@@ -30,6 +44,8 @@ import "react-web-pdf-editor/styles.css";
|
|
|
30
44
|
|
|
31
45
|
## Quick start
|
|
32
46
|
|
|
47
|
+
This is the [quick start demo](https://react-web-pdf-editor-demo.vercel.app/quick-start): a client component that imports `PdfEditor` directly.
|
|
48
|
+
|
|
33
49
|
```tsx
|
|
34
50
|
import { PdfEditor } from "react-web-pdf-editor";
|
|
35
51
|
import "react-web-pdf-editor/styles.css";
|
|
@@ -240,7 +256,7 @@ onExport={(blob) => {
|
|
|
240
256
|
|
|
241
257
|
## Custom toolbar
|
|
242
258
|
|
|
243
|
-
`toolbar` receives a `ToolbarApi`. `showToolbar={false}` removes the bar entirely.
|
|
259
|
+
`toolbar` receives a `ToolbarApi`. `showToolbar={false}` removes the bar entirely. The [custom toolbar demo](https://react-web-pdf-editor-demo.vercel.app/custom) is a full bar on this API: select, draw, highlight, text, image, and signature, plus undo, redo, zoom, pages, search, and export.
|
|
244
260
|
|
|
245
261
|
```tsx
|
|
246
262
|
import { PdfEditor, Toolbar } from "react-web-pdf-editor";
|
|
@@ -381,7 +397,7 @@ Export uses a second worker shipped with this package. Vite, Webpack, and other
|
|
|
381
397
|
|
|
382
398
|
## Next.js
|
|
383
399
|
|
|
384
|
-
Load the editor in the browser. The package talks to workers, canvas, and `window` during render.
|
|
400
|
+
Load the editor in the browser. The package talks to workers, canvas, and `window` during render. This is the [basic demo](https://react-web-pdf-editor-demo.vercel.app/basic-demo). A direct import from a client component, without `next/dynamic`, is the [quick start demo](https://react-web-pdf-editor-demo.vercel.app/quick-start).
|
|
385
401
|
|
|
386
402
|
```tsx
|
|
387
403
|
"use client";
|
package/package.json
CHANGED