@edgepdf/viewer-js 0.0.30 → 0.0.32

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 CHANGED
@@ -10,9 +10,7 @@ npm install @edgepdf/viewer-js
10
10
  pnpm add @edgepdf/viewer-js
11
11
  ```
12
12
 
13
- **Note:** Leaflet is bundled with this library, so you don't need to install it separately.
14
-
15
- **For SSR frameworks (Next.js, Remix, etc.):** This library requires a browser environment. Use dynamic imports or the React component (`@edgepdf/viewer-react`) which handles SSR automatically. See [SSR Support](#ssr-support) section below.
13
+ **Note:** Leaflet is bundled with this library, so you don't need to install it separately. **CSS styles are automatically injected** when you import the library - no manual CSS import needed!
16
14
 
17
15
  ## Usage
18
16
 
@@ -80,93 +78,6 @@ const viewer = new EdgePdfViewer({
80
78
  viewer.initialize();
81
79
  ```
82
80
 
83
- ## SSR Support
84
-
85
- This library uses Leaflet, which requires a browser environment. For SSR frameworks like Next.js, Remix, or other React frameworks, you have two options:
86
-
87
- ### Option 1: Use the React Component (Recommended)
88
-
89
- The `@edgepdf/viewer-react` package handles SSR automatically with dynamic imports:
90
-
91
- ```tsx
92
- import { EdgePDFViewer } from '@edgepdf/viewer-react';
93
- import { ViewerProvider } from '@edgepdf/viewer-react';
94
-
95
- // In your component
96
- <ViewerProvider>
97
- <EdgePDFViewer config={config} />
98
- </ViewerProvider>;
99
- ```
100
-
101
- ### Option 2: Use Dynamic Imports (Next.js)
102
-
103
- If you need to use `@edgepdf/viewer-js` directly in Next.js, use dynamic imports with `ssr: false`:
104
-
105
- ```tsx
106
- import dynamic from 'next/dynamic';
107
-
108
- const EdgePdfViewer = dynamic(
109
- () => import('@edgepdf/viewer-js').then((mod) => mod.EdgePdfViewer),
110
- { ssr: false }
111
- );
112
-
113
- // Or use it in a client component
114
- ('use client');
115
-
116
- import { useEffect, useRef } from 'react';
117
- import dynamic from 'next/dynamic';
118
-
119
- const EdgePdfViewer = dynamic(
120
- () => import('@edgepdf/viewer-js').then((mod) => mod.EdgePdfViewer),
121
- { ssr: false }
122
- );
123
-
124
- export default function MyComponent() {
125
- const containerRef = useRef<HTMLDivElement>(null);
126
-
127
- useEffect(() => {
128
- if (!containerRef.current) return;
129
-
130
- const { EdgePdfViewer } = require('@edgepdf/viewer-js');
131
- const viewer = new EdgePdfViewer({
132
- container: containerRef.current,
133
- config: yourConfig,
134
- });
135
- viewer.initialize();
136
-
137
- return () => viewer.dispose();
138
- }, []);
139
-
140
- return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
141
- }
142
- ```
143
-
144
- ### Next.js Configuration
145
-
146
- If you're still getting build errors, add this to your `next.config.js`:
147
-
148
- ```javascript
149
- /** @type {import('next').NextConfig} */
150
- const nextConfig = {
151
- webpack: (config, { isServer }) => {
152
- if (isServer) {
153
- // Exclude @edgepdf/viewer-js from server-side bundle
154
- config.externals = config.externals || [];
155
- config.externals.push('@edgepdf/viewer-js');
156
- }
157
- return config;
158
- },
159
- };
160
-
161
- module.exports = nextConfig;
162
- ```
163
-
164
- **Note:** You'll also need to import the CSS manually when using dynamic imports:
165
-
166
- ```tsx
167
- import '@edgepdf/viewer-js/dist/styles.css';
168
- ```
169
-
170
81
  ## API Reference
171
82
 
172
83
  ### EdgePdfViewer