@shznet/pdf-sign-react 0.2.2 → 1.0.0
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 +100 -5
- package/dist/index.js +432 -393
- package/dist/lib/pdf-sign-react.d.ts +15 -1
- package/dist/lib/pdf-sign-react.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -36,7 +36,7 @@ export function App() {
|
|
|
36
36
|
```
|
|
37
37
|
|
|
38
38
|
```tsx
|
|
39
|
-
<button onClick={() => controlRef.current?.print(
|
|
39
|
+
<button onClick={() => controlRef.current?.print()}>
|
|
40
40
|
Print PDF
|
|
41
41
|
</button>
|
|
42
42
|
```
|
|
@@ -46,10 +46,105 @@ export function App() {
|
|
|
46
46
|
| Prop | Type | Description |
|
|
47
47
|
|------|------|-------------|
|
|
48
48
|
| `src` | `string \| Uint8Array \| ArrayBuffer` | PDF source to load. |
|
|
49
|
-
| `
|
|
49
|
+
| `page` | `number` | Current page number (1-based). Supports two-way binding via state. |
|
|
50
|
+
| `viewMode` | `'single' \| 'scroll'` | View mode - changes trigger re-render. |
|
|
51
|
+
| `scale` | `number` | Zoom scale - changes trigger re-render. |
|
|
50
52
|
| `zoomable` | `boolean` | Enable/disable gesture zooming (default: true). |
|
|
51
|
-
| `fields` | `SignatureField[]` |
|
|
53
|
+
| `fields` | `SignatureField[]` | Controlled fields list. |
|
|
54
|
+
| `pdfLoaderOptions` | `PdfLoaderOptions` | PDF.js configuration (workerSrc, etc.). |
|
|
55
|
+
| `onReady` | `(control: PdfSignControl) => void` | Callback when control is initialized. |
|
|
52
56
|
| `onLoad` | `() => void` | Callback when PDF is loaded. |
|
|
53
|
-
| `onPageChange` | `(page: number, total: number) => void` | Callback when page changes. |
|
|
57
|
+
| `onPageChange` | `(page: number, total: number) => void` | Callback when page changes (enables two-way binding). |
|
|
54
58
|
| `onScaleChange` | `(scale: number) => void` | Callback when zoom level changes. |
|
|
55
|
-
| `onFieldsChange` | `(fields: SignatureField[]) => void` | Callback when fields are
|
|
59
|
+
| `onFieldsChange` | `(fields: SignatureField[]) => void` | Callback when fields are modified. |
|
|
60
|
+
| `onError` | `(error: Error) => void` | Callback on errors. |
|
|
61
|
+
|
|
62
|
+
## Two-Way Binding Example
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
import { PdfSignReact } from '@shznet/pdf-sign-react';
|
|
66
|
+
import { useState } from 'react';
|
|
67
|
+
|
|
68
|
+
export function App() {
|
|
69
|
+
const [currentPage, setCurrentPage] = useState(1);
|
|
70
|
+
const [totalPages, setTotalPages] = useState(0);
|
|
71
|
+
const [scale, setScale] = useState(1.0);
|
|
72
|
+
|
|
73
|
+
return (
|
|
74
|
+
<div>
|
|
75
|
+
<div>
|
|
76
|
+
<button onClick={() => setCurrentPage(p => Math.max(1, p - 1))}>
|
|
77
|
+
Previous
|
|
78
|
+
</button>
|
|
79
|
+
<span>Page {currentPage} / {totalPages}</span>
|
|
80
|
+
<button onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}>
|
|
81
|
+
Next
|
|
82
|
+
</button>
|
|
83
|
+
|
|
84
|
+
<button onClick={() => setScale(s => s + 0.25)}>Zoom In</button>
|
|
85
|
+
<button onClick={() => setScale(s => Math.max(0.25, s - 0.25))}>Zoom Out</button>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<PdfSignReact
|
|
89
|
+
src="https://example.com/doc.pdf"
|
|
90
|
+
page={currentPage}
|
|
91
|
+
scale={scale}
|
|
92
|
+
onPageChange={(page, total) => {
|
|
93
|
+
setCurrentPage(page); // Two-way binding
|
|
94
|
+
setTotalPages(total);
|
|
95
|
+
}}
|
|
96
|
+
onScaleChange={setScale} // Two-way binding
|
|
97
|
+
style={{ height: '600px' }}
|
|
98
|
+
/>
|
|
99
|
+
</div>
|
|
100
|
+
);
|
|
101
|
+
}
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## Ref Methods
|
|
105
|
+
|
|
106
|
+
Access methods via `ref` for imperative control:
|
|
107
|
+
|
|
108
|
+
```tsx
|
|
109
|
+
const pdfRef = useRef<PdfSignReactRef>(null);
|
|
110
|
+
|
|
111
|
+
// Navigation
|
|
112
|
+
pdfRef.current?.goToPage(5);
|
|
113
|
+
pdfRef.current?.nextPage();
|
|
114
|
+
pdfRef.current?.previousPage();
|
|
115
|
+
const currentPage = pdfRef.current?.getCurrentPage();
|
|
116
|
+
const totalPages = pdfRef.current?.getTotalPages();
|
|
117
|
+
|
|
118
|
+
// Zoom
|
|
119
|
+
pdfRef.current?.setScale(1.5);
|
|
120
|
+
const scale = pdfRef.current?.getScale();
|
|
121
|
+
|
|
122
|
+
// View Mode
|
|
123
|
+
await pdfRef.current?.setViewMode('single');
|
|
124
|
+
const mode = pdfRef.current?.getViewMode();
|
|
125
|
+
|
|
126
|
+
// Page Dimensions
|
|
127
|
+
const dims = await pdfRef.current?.getPageDimensions(1); // Page 1 (1-based index)
|
|
128
|
+
console.log(`Page size: ${dims?.width} x ${dims?.height} points`);
|
|
129
|
+
|
|
130
|
+
// Field Management
|
|
131
|
+
await pdfRef.current?.addField({
|
|
132
|
+
id: 'sig1',
|
|
133
|
+
pageNumber: 1,
|
|
134
|
+
rect: { x: 100, y: 100, width: 200, height: 80 },
|
|
135
|
+
type: 'signature',
|
|
136
|
+
content: '<svg>...</svg>',
|
|
137
|
+
draggable: true,
|
|
138
|
+
resizable: true
|
|
139
|
+
});
|
|
140
|
+
|
|
141
|
+
pdfRef.current?.removeField('sig1');
|
|
142
|
+
pdfRef.current?.updateField('sig1', { rect: { x: 150, y: 150, width: 200, height: 80 } });
|
|
143
|
+
const fields = pdfRef.current?.getFields();
|
|
144
|
+
|
|
145
|
+
// Printing
|
|
146
|
+
await pdfRef.current?.print({ withSignatures: false });
|
|
147
|
+
|
|
148
|
+
// Direct Control Access
|
|
149
|
+
const control = pdfRef.current?.getControl();
|
|
150
|
+
```
|