react-pdf-highlighter-plus 1.0.0 → 1.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.
- package/README.md +20 -13
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -7,11 +7,11 @@
|
|
|
7
7
|
<a href="https://github.com/QuocVietHa08/react-pdf-highlighter-plus/actions/workflows/node.js.yml">
|
|
8
8
|
<img src="https://github.com/QuocVietHa08/react-pdf-highlighter-plus/actions/workflows/node.js.yml/badge.svg" alt="Node.js CI">
|
|
9
9
|
</a>
|
|
10
|
-
<a href="https://badge.fury.io/js/react-pdf-highlighter-
|
|
11
|
-
<img src="https://badge.fury.io/js/react-pdf-highlighter-
|
|
10
|
+
<a href="https://badge.fury.io/js/react-pdf-highlighter-plus">
|
|
11
|
+
<img src="https://badge.fury.io/js/react-pdf-highlighter-plus.svg" alt="npm version">
|
|
12
12
|
</a>
|
|
13
|
-
<a href="https://www.npmjs.com/package/react-pdf-highlighter-
|
|
14
|
-
<img src="https://img.shields.io/npm/dm/react-pdf-highlighter-
|
|
13
|
+
<a href="https://www.npmjs.com/package/react-pdf-highlighter-plus">
|
|
14
|
+
<img src="https://img.shields.io/npm/dm/react-pdf-highlighter-plus.svg" alt="npm downloads">
|
|
15
15
|
</a>
|
|
16
16
|
</p>
|
|
17
17
|
|
|
@@ -48,14 +48,20 @@
|
|
|
48
48
|
|----------|------|
|
|
49
49
|
| Live Demo | [View Demo](https://quocvietha08.github.io/react-pdf-highlighter-plus/example-app/) |
|
|
50
50
|
| Documentation | [API Docs](https://quocvietha08.github.io/react-pdf-highlighter-plus/docs/) |
|
|
51
|
-
| NPM Package | [npm](https://www.npmjs.com/package/react-pdf-highlighter-
|
|
51
|
+
| NPM Package | [npm](https://www.npmjs.com/package/react-pdf-highlighter-plus) |
|
|
52
52
|
|
|
53
53
|
---
|
|
54
54
|
|
|
55
|
-
## Installation
|
|
55
|
+
## Installation
|
|
56
56
|
|
|
57
57
|
```bash
|
|
58
|
-
npm install react-pdf-highlighter-
|
|
58
|
+
npm install react-pdf-highlighter-plus
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### Import Styles
|
|
62
|
+
|
|
63
|
+
```tsx
|
|
64
|
+
import "react-pdf-highlighter-plus/style/style.css";
|
|
59
65
|
```
|
|
60
66
|
|
|
61
67
|
---
|
|
@@ -71,7 +77,8 @@ import {
|
|
|
71
77
|
TextHighlight,
|
|
72
78
|
AreaHighlight,
|
|
73
79
|
useHighlightContainerContext,
|
|
74
|
-
} from "react-pdf-highlighter-
|
|
80
|
+
} from "react-pdf-highlighter-plus";
|
|
81
|
+
import "react-pdf-highlighter-plus/style/style.css";
|
|
75
82
|
|
|
76
83
|
function App() {
|
|
77
84
|
const [highlights, setHighlights] = useState([]);
|
|
@@ -134,7 +141,7 @@ Hold `Alt` and drag to create rectangular highlights.
|
|
|
134
141
|
Create draggable, editable text annotations with customizable styling.
|
|
135
142
|
|
|
136
143
|
```tsx
|
|
137
|
-
import { FreetextHighlight } from "react-pdf-highlighter-
|
|
144
|
+
import { FreetextHighlight } from "react-pdf-highlighter-plus";
|
|
138
145
|
|
|
139
146
|
<PdfHighlighter
|
|
140
147
|
enableFreetextCreation={() => freetextMode}
|
|
@@ -168,7 +175,7 @@ import { FreetextHighlight } from "react-pdf-highlighter-extended";
|
|
|
168
175
|
Upload images or draw signatures and place them on PDFs.
|
|
169
176
|
|
|
170
177
|
```tsx
|
|
171
|
-
import { ImageHighlight, SignaturePad } from "react-pdf-highlighter-
|
|
178
|
+
import { ImageHighlight, SignaturePad } from "react-pdf-highlighter-plus";
|
|
172
179
|
|
|
173
180
|
// Signature pad modal
|
|
174
181
|
<SignaturePad
|
|
@@ -200,7 +207,7 @@ import { ImageHighlight, SignaturePad } from "react-pdf-highlighter-extended";
|
|
|
200
207
|
Draw freehand annotations directly on PDFs.
|
|
201
208
|
|
|
202
209
|
```tsx
|
|
203
|
-
import { DrawingHighlight } from "react-pdf-highlighter-
|
|
210
|
+
import { DrawingHighlight } from "react-pdf-highlighter-plus";
|
|
204
211
|
|
|
205
212
|
<PdfHighlighter
|
|
206
213
|
enableDrawingCreation={() => drawingMode}
|
|
@@ -235,7 +242,7 @@ import { DrawingHighlight } from "react-pdf-highlighter-extended";
|
|
|
235
242
|
Export your annotated PDF with all highlights embedded.
|
|
236
243
|
|
|
237
244
|
```tsx
|
|
238
|
-
import { exportPdf } from "react-pdf-highlighter-
|
|
245
|
+
import { exportPdf } from "react-pdf-highlighter-plus";
|
|
239
246
|
|
|
240
247
|
const handleExport = async () => {
|
|
241
248
|
const pdfBytes = await exportPdf(pdfUrl, highlights, {
|
|
@@ -356,7 +363,7 @@ const { highlight } = useHighlightContainerContext<MyHighlight>();
|
|
|
356
363
|
### Tips and Popups
|
|
357
364
|
|
|
358
365
|
```tsx
|
|
359
|
-
import { MonitoredHighlightContainer } from "react-pdf-highlighter-
|
|
366
|
+
import { MonitoredHighlightContainer } from "react-pdf-highlighter-plus";
|
|
360
367
|
|
|
361
368
|
<MonitoredHighlightContainer
|
|
362
369
|
highlightTip={{
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-pdf-highlighter-plus",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.2",
|
|
5
5
|
"description": "Set of modern React components for PDF highlighting",
|
|
6
6
|
"author": "Edward Ha <quocvietha08@gmail.com>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -32,7 +32,9 @@
|
|
|
32
32
|
"types": "./dist/esm/index.d.ts",
|
|
33
33
|
"import": "./dist/esm/index.js"
|
|
34
34
|
},
|
|
35
|
-
"./style
|
|
35
|
+
"./style/style.css": "./dist/esm/style/style.css",
|
|
36
|
+
"./style/pdf_viewer.css": "./dist/esm/style/pdf_viewer.css",
|
|
37
|
+
"./style/*.css": "./dist/esm/style/*.css"
|
|
36
38
|
},
|
|
37
39
|
"scripts": {
|
|
38
40
|
"start": "npm run dev",
|