@edgepdf/viewer-react 0.0.4 → 0.0.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 +68 -2
- package/dist/index.js +0 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,6 +1,72 @@
|
|
|
1
|
-
# viewer-react
|
|
1
|
+
# @edgepdf/viewer-react
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
EdgePDF Viewer - React components for viewing PDF documents with interactive markers and zoom controls.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @edgepdf/viewer-react @edgepdf/viewer-js
|
|
9
|
+
# or
|
|
10
|
+
pnpm add @edgepdf/viewer-react @edgepdf/viewer-js
|
|
11
|
+
# or
|
|
12
|
+
yarn add @edgepdf/viewer-react @edgepdf/viewer-js
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
### Next.js
|
|
18
|
+
|
|
19
|
+
In your Next.js application, you need to import the CSS file manually:
|
|
20
|
+
|
|
21
|
+
**App Router (app directory):**
|
|
22
|
+
```tsx
|
|
23
|
+
// app/layout.tsx or app/page.tsx
|
|
24
|
+
import '@edgepdf/viewer-react/styles.css';
|
|
25
|
+
import { EdgePDFViewer } from '@edgepdf/viewer-react';
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
**Pages Router:**
|
|
29
|
+
```tsx
|
|
30
|
+
// pages/_app.tsx
|
|
31
|
+
import '@edgepdf/viewer-react/styles.css';
|
|
32
|
+
|
|
33
|
+
export default function App({ Component, pageProps }) {
|
|
34
|
+
return <Component {...pageProps} />;
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
**Or in a specific page:**
|
|
39
|
+
```tsx
|
|
40
|
+
// pages/your-page.tsx
|
|
41
|
+
import '@edgepdf/viewer-react/styles.css';
|
|
42
|
+
import { EdgePDFViewer } from '@edgepdf/viewer-react';
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### Other React Applications
|
|
46
|
+
|
|
47
|
+
```tsx
|
|
48
|
+
import '@edgepdf/viewer-react/styles.css';
|
|
49
|
+
import { EdgePDFViewer } from '@edgepdf/viewer-react';
|
|
50
|
+
|
|
51
|
+
function App() {
|
|
52
|
+
const config = {
|
|
53
|
+
tileUrl: 'https://example.com/tiles/{z}/{x}/{y}.png',
|
|
54
|
+
imageInfo: {
|
|
55
|
+
width: 2000,
|
|
56
|
+
height: 3000,
|
|
57
|
+
tileSize: 256,
|
|
58
|
+
maxZoom: 5,
|
|
59
|
+
minZoom: 0
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
return (
|
|
64
|
+
<EdgePDFViewer config={config}>
|
|
65
|
+
{/* Your components */}
|
|
66
|
+
</EdgePDFViewer>
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
```
|
|
4
70
|
|
|
5
71
|
## Building
|
|
6
72
|
|
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@edgepdf/viewer-react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.5",
|
|
4
4
|
"description": "EdgePDF Viewer - React components for viewing PDF documents with interactive markers and zoom controls",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
"@edgepdf/testing-utils": "workspace:*"
|
|
71
71
|
},
|
|
72
72
|
"peerDependencies": {
|
|
73
|
-
"@edgepdf/viewer-js": "^0.0.
|
|
73
|
+
"@edgepdf/viewer-js": "^0.0.5",
|
|
74
74
|
"react": "^18.0.0",
|
|
75
75
|
"react-dom": "^18.0.0"
|
|
76
76
|
}
|