@edgepdf/viewer-react 0.0.4 → 0.0.6

package/README.md

@@ -1,6 +1,72 @@
-# viewer-react
+# @edgepdf/viewer-react
 
-This library was generated with [Nx](https://nx.dev).
+EdgePDF Viewer - React components for viewing PDF documents with interactive markers and zoom controls.
+
+## Installation
+
+```bash
+npm install @edgepdf/viewer-react @edgepdf/viewer-js
+# or
+pnpm add @edgepdf/viewer-react @edgepdf/viewer-js
+# or
+yarn add @edgepdf/viewer-react @edgepdf/viewer-js
+```
+
+## Usage
+
+### Next.js
+
+In your Next.js application, you need to import the CSS file manually:
+
+**App Router (app directory):**
+```tsx
+// app/layout.tsx or app/page.tsx
+import '@edgepdf/viewer-react/styles.css';
+import { EdgePDFViewer } from '@edgepdf/viewer-react';
+```
+
+**Pages Router:**
+```tsx
+// pages/_app.tsx
+import '@edgepdf/viewer-react/styles.css';
+
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}
+```
+
+**Or in a specific page:**
+```tsx
+// pages/your-page.tsx
+import '@edgepdf/viewer-react/styles.css';
+import { EdgePDFViewer } from '@edgepdf/viewer-react';
+```
+
+### Other React Applications
+
+```tsx
+import '@edgepdf/viewer-react/styles.css';
+import { EdgePDFViewer } from '@edgepdf/viewer-react';
+
+function App() {
+  const config = {
+    tileUrl: 'https://example.com/tiles/{z}/{x}/{y}.png',
+    imageInfo: {
+      width: 2000,
+      height: 3000,
+      tileSize: 256,
+      maxZoom: 5,
+      minZoom: 0
+    }
+  };
+
+  return (
+    <EdgePDFViewer config={config}>
+      {/* Your components */}
+    </EdgePDFViewer>
+  );
+}
+```
 
 ## Building