next-manga-pdf 1.0.1 → 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 +111 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
|
|
2
|
+
# next-manga-pdf
|
|
3
|
+
|
|
4
|
+
A lightweight, high-performance PDF viewer for Next.js, optimized for manga and document reading.
|
|
5
|
+
|
|
6
|
+
## Features
|
|
7
|
+
|
|
8
|
+
* **Next.js Ready**: Built with `use client` support and SSR-safe dynamic loading.
|
|
9
|
+
* **Highly Customizable**: Pass your own Tailwind classes for full control over layout.
|
|
10
|
+
* **Performance Optimized**: Uses `pdf.js` with canvas render cancellation to prevent memory leaks and rendering collisions.
|
|
11
|
+
* **Flexible**: Not just for manga—use it for any multi-page PDF document.
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
pnpm add next-manga-pdf
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
Since this component interacts with the browser's DOM (Canvas API), it must be loaded dynamically in Next.js to avoid SSR errors (ReferenceError: DOMMatrix is not defined).
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
'use client';
|
|
25
|
+
|
|
26
|
+
import dynamic from 'next/dynamic';
|
|
27
|
+
|
|
28
|
+
const PdfViewer = dynamic(
|
|
29
|
+
() => import('next-manga-pdf').then((mod) => mod.PdfViewer),
|
|
30
|
+
{ ssr: false }
|
|
31
|
+
);
|
|
32
|
+
|
|
33
|
+
export default function MyPage() {
|
|
34
|
+
return (
|
|
35
|
+
<div className="bg-zinc-50 min-h-screen">
|
|
36
|
+
<PdfViewer
|
|
37
|
+
url="/your-file.pdf"
|
|
38
|
+
scale={2.0}
|
|
39
|
+
className="w-full flex flex-col items-center"
|
|
40
|
+
canvasClassName="w-full max-w-[800px] shadow-lg"
|
|
41
|
+
/>
|
|
42
|
+
</div>
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
## Usage/Examples
|
|
49
|
+
|
|
50
|
+
```tsx
|
|
51
|
+
'use client';
|
|
52
|
+
|
|
53
|
+
import dynamic from 'next/dynamic';
|
|
54
|
+
|
|
55
|
+
const PdfViewer = dynamic(
|
|
56
|
+
() => import('next-manga-pdf').then((mod) => mod.PdfViewer),
|
|
57
|
+
{ ssr: false }
|
|
58
|
+
);
|
|
59
|
+
|
|
60
|
+
export default function MyPage() {
|
|
61
|
+
return (
|
|
62
|
+
<div className="bg-zinc-50 min-h-screen">
|
|
63
|
+
<PdfViewer
|
|
64
|
+
url="/your-file.pdf"
|
|
65
|
+
scale={2.0}
|
|
66
|
+
className="w-full flex flex-col items-center"
|
|
67
|
+
/>
|
|
68
|
+
</div>
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## Props
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
## API Reference
|
|
77
|
+
|
|
78
|
+
| Prop | Type | Default | Description |
|
|
79
|
+
| :-------- | :------- | :------- | :------------------------- |
|
|
80
|
+
| `url` | `string` | **Required**. | URL to the PDF file. |
|
|
81
|
+
| `scale` | `number` | `1.5` | The zoom/scaling level of the PDF pages. |
|
|
82
|
+
| `className` | `string` | `''` | Tailwind classes for the main wrapper. |
|
|
83
|
+
|
|
84
|
+
## Important Considerations
|
|
85
|
+
|
|
86
|
+
### 1. Global CSS
|
|
87
|
+
|
|
88
|
+
To ensure the canvas doesn't overflow its container, add this to your global CSS:
|
|
89
|
+
|
|
90
|
+
```css
|
|
91
|
+
.pdf-viewer-wrapper canvas {
|
|
92
|
+
max-width: 100%;
|
|
93
|
+
height: auto;
|
|
94
|
+
display: block;
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### 2. SSR
|
|
99
|
+
|
|
100
|
+
Always use next/dynamic with `{ ssr: false }` when importing this component to ensure the code only executes in the client-side environment where the Canvas API exists.
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
## Authors
|
|
104
|
+
|
|
105
|
+
- [@ShiroAky](https://www.github.com/ShiroAky)
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
## License
|
|
109
|
+
|
|
110
|
+
[MIT](https://choosealicense.com/licenses/mit/)
|
|
111
|
+
|
package/package.json
CHANGED