@embedpdf/react-pdf-viewer 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 CloudPDF
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,101 @@
+# @embedpdf/react-pdf-viewer
+
+React component for embedding PDF documents with full-featured viewing capabilities.
+
+## Installation
+
+```bash
+npm install @embedpdf/react-pdf-viewer
+# or
+pnpm add @embedpdf/react-pdf-viewer
+# or
+yarn add @embedpdf/react-pdf-viewer
+```
+
+## Usage
+
+```tsx
+import { PDFViewer } from '@embedpdf/react-pdf-viewer';
+
+function App() {
+  return (
+    <PDFViewer
+      config={{
+        src: '/document.pdf',
+        theme: { preference: 'system' },
+        zoom: { defaultLevel: 'fit-width' },
+      }}
+      style={{ width: '100%', height: '100vh' }}
+      onReady={(registry) => {
+        console.log('PDF viewer ready', registry);
+      }}
+    />
+  );
+}
+```
+
+## Props
+
+| Prop        | Type                  | Description                              |
+| ----------- | --------------------- | ---------------------------------------- |
+| `config`    | `PDFViewerConfig`     | Full configuration object for the viewer |
+| `className` | `string`              | CSS class name for the container         |
+| `style`     | `CSSProperties`       | Inline styles for the container          |
+| `onInit`    | `(container) => void` | Callback when viewer is initialized      |
+| `onReady`   | `(registry) => void`  | Callback when registry is ready          |
+
+The `config` prop accepts all configuration options from `@embedpdf/snippet`, including:
+
+- `src` - URL or path to the PDF document
+- `theme` - Theme configuration
+- `zoom` - Zoom configuration
+- `scroll` - Scroll configuration
+- `annotations` - Annotation configuration
+- And more...
+
+## Accessing the Registry
+
+Use a ref to access the viewer container and registry:
+
+```tsx
+import { useRef } from 'react';
+import { PDFViewer, PDFViewerRef } from '@embedpdf/react-pdf-viewer';
+
+function App() {
+  const viewerRef = useRef<PDFViewerRef>(null);
+
+  const handleClick = async () => {
+    const registry = await viewerRef.current?.registry;
+    // Use registry to access plugins
+  };
+
+  return (
+    <>
+      <PDFViewer
+        ref={viewerRef}
+        config={{ src: '/document.pdf' }}
+        style={{ width: '100%', height: '100vh' }}
+      />
+      <button onClick={handleClick}>Get Registry</button>
+    </>
+  );
+}
+```
+
+## Re-exports
+
+This package re-exports everything from `@embedpdf/snippet`, so you can import types and utilities directly:
+
+```tsx
+import {
+  PDFViewer,
+  ZoomPlugin,
+  ScrollPlugin,
+  type PDFViewerConfig,
+  type PluginRegistry,
+} from '@embedpdf/react-pdf-viewer';
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),r=require("react"),t=require("@embedpdf/snippet"),n=r.forwardRef(function(n,u){const{config:s={},className:c,style:l,onInit:i,onReady:o}=n,a=r.useRef(null),f=r.useRef(null);return r.useImperativeHandle(u,()=>({get container(){return f.current},get registry(){var e;return(null==(e=f.current)?void 0:e.registry)??null}})),r.useEffect(()=>{if(!a.current)return;const e=t.init({type:"container",target:a.current,...s});return e&&(f.current=e,null==i||i(e),o&&e.registry.then(o)),()=>{f.current&&a.current&&(a.current.innerHTML="",f.current=null)}},[]),e.jsx("div",{ref:a,className:c,style:l})});exports.PDFViewer=n,exports.default=n,Object.keys(t).forEach(e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/index.tsx"],"sourcesContent":["import {\n  useRef,\n  useEffect,\n  useImperativeHandle,\n  forwardRef,\n  type ForwardedRef,\n  type CSSProperties,\n} from 'react';\nimport EmbedPDF, {\n  type EmbedPdfContainer,\n  type PDFViewerConfig,\n  type PluginRegistry,\n} from '@embedpdf/snippet';\n\n// Re-export everything from snippet for convenience\nexport * from '@embedpdf/snippet';\n\nexport interface PDFViewerProps {\n  /** Full configuration for the PDF viewer */\n  config?: PDFViewerConfig;\n  /** CSS class name for the container div */\n  className?: string;\n  /** Inline styles for the container div */\n  style?: CSSProperties;\n  /** Callback when the viewer is initialized */\n  onInit?: (container: EmbedPdfContainer) => void;\n  /** Callback when the registry is ready */\n  onReady?: (registry: PluginRegistry) => void;\n}\n\nexport interface PDFViewerRef {\n  /** The EmbedPdfContainer element */\n  container: EmbedPdfContainer | null;\n  /** Promise that resolves to the PluginRegistry */\n  registry: Promise<PluginRegistry> | null;\n}\n\n/**\n * React component for embedding PDF documents\n *\n * @example\n * ```tsx\n * import { PDFViewer } from '@embedpdf/react-pdf-viewer';\n *\n * function App() {\n *   return (\n *     <PDFViewer\n *       config={{\n *         src: '/document.pdf',\n *         theme: { preference: 'system' },\n *       }}\n *       style={{ width: '100%', height: '100vh' }}\n *       onReady={(registry) => {\n *         console.log('PDF viewer ready', registry);\n *       }}\n *     />\n *   );\n * }\n * ```\n */\nexport const PDFViewer = forwardRef(function PDFViewer(\n  props: PDFViewerProps,\n  ref: ForwardedRef<PDFViewerRef>,\n) {\n  const { config = {}, className, style, onInit, onReady } = props;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const viewerRef = useRef<EmbedPdfContainer | null>(null);\n\n  useImperativeHandle(ref, () => ({\n    get container() {\n      return viewerRef.current;\n    },\n    get registry() {\n      return viewerRef.current?.registry ?? null;\n    },\n  }));\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    // Initialize the viewer with the config prop\n    const viewer = EmbedPDF.init({\n      type: 'container',\n      target: containerRef.current,\n      ...config,\n    });\n\n    if (viewer) {\n      viewerRef.current = viewer;\n      onInit?.(viewer);\n\n      // Call onReady when registry is available\n      if (onReady) {\n        viewer.registry.then(onReady);\n      }\n    }\n\n    return () => {\n      // Cleanup: remove the viewer element\n      if (viewerRef.current && containerRef.current) {\n        containerRef.current.innerHTML = '';\n        viewerRef.current = null;\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return <div ref={containerRef} className={className} style={style} />;\n});\n\nexport default PDFViewer;\n"],"names":["PDFViewer","forwardRef","props","ref","config","className","style","onInit","onReady","containerRef","useRef","viewerRef","useImperativeHandle","container","current","registry","_a","useEffect","viewer","EmbedPDF","init","type","target","then","innerHTML","jsx"],"mappings":"mMA4DaA,EAAYC,EAAAA,WAAW,SAClCC,EACAC,GAEA,MAAMC,OAAEA,EAAS,aAAIC,QAAWC,EAAAC,OAAOA,EAAAC,QAAQA,GAAYN,EACrDO,EAAeC,EAAAA,OAAuB,MACtCC,EAAYD,EAAAA,OAAiC,MAyCnD,OAvCAE,EAAAA,oBAAoBT,EAAK,KAAA,CACvB,aAAIU,GACF,OAAOF,EAAUG,OACnB,EACA,YAAIC,SACF,OAAO,OAAAC,EAAAL,EAAUG,cAAV,EAAAE,EAAmBD,WAAY,IACxC,KAGFE,EAAAA,UAAU,KACR,IAAKR,EAAaK,QAAS,OAG3B,MAAMI,EAASC,EAASC,KAAK,CAC3BC,KAAM,YACNC,OAAQb,EAAaK,WAClBV,IAaL,OAVIc,IACFP,EAAUG,QAAUI,EACpB,MAAAX,GAAAA,EAASW,GAGLV,GACFU,EAAOH,SAASQ,KAAKf,IAIlB,KAEDG,EAAUG,SAAWL,EAAaK,UACpCL,EAAaK,QAAQU,UAAY,GACjCb,EAAUG,QAAU,QAIvB,IAEIW,EAAAA,IAAC,MAAA,CAAItB,IAAKM,EAAcJ,YAAsBC,SACvD"}

package/dist/index.d.ts

@@ -0,0 +1,47 @@
+import { CSSProperties } from 'react';
+import { EmbedPdfContainer, PDFViewerConfig, PluginRegistry } from '@embedpdf/snippet';
+export * from '@embedpdf/snippet';
+export interface PDFViewerProps {
+    /** Full configuration for the PDF viewer */
+    config?: PDFViewerConfig;
+    /** CSS class name for the container div */
+    className?: string;
+    /** Inline styles for the container div */
+    style?: CSSProperties;
+    /** Callback when the viewer is initialized */
+    onInit?: (container: EmbedPdfContainer) => void;
+    /** Callback when the registry is ready */
+    onReady?: (registry: PluginRegistry) => void;
+}
+export interface PDFViewerRef {
+    /** The EmbedPdfContainer element */
+    container: EmbedPdfContainer | null;
+    /** Promise that resolves to the PluginRegistry */
+    registry: Promise<PluginRegistry> | null;
+}
+/**
+ * React component for embedding PDF documents
+ *
+ * @example
+ * ```tsx
+ * import { PDFViewer } from '@embedpdf/react-pdf-viewer';
+ *
+ * function App() {
+ *   return (
+ *     <PDFViewer
+ *       config={{
+ *         src: '/document.pdf',
+ *         theme: { preference: 'system' },
+ *       }}
+ *       style={{ width: '100%', height: '100vh' }}
+ *       onReady={(registry) => {
+ *         console.log('PDF viewer ready', registry);
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare const PDFViewer: import('react').ForwardRefExoticComponent<PDFViewerProps & import('react').RefAttributes<PDFViewerRef>>;
+export default PDFViewer;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AACf,OAAiB,EACf,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAG3B,cAAc,mBAAmB,CAAC;AAElC,MAAM,WAAW,cAAc;IAC7B,4CAA4C;IAC5C,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,0CAA0C;IAC1C,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;CAC9C;AAED,MAAM,WAAW,YAAY;IAC3B,oCAAoC;IACpC,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC,kDAAkD;IAClD,QAAQ,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;CAC1C;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,SAAS,yGAgDpB,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useImperativeHandle, useEffect } from "react";
+import EmbedPDF__default from "@embedpdf/snippet";
+export * from "@embedpdf/snippet";
+const PDFViewer = forwardRef(function PDFViewer2(props, ref) {
+  const { config = {}, className, style, onInit, onReady } = props;
+  const containerRef = useRef(null);
+  const viewerRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    get container() {
+      return viewerRef.current;
+    },
+    get registry() {
+      var _a;
+      return ((_a = viewerRef.current) == null ? void 0 : _a.registry) ?? null;
+    }
+  }));
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const viewer = EmbedPDF__default.init({
+      type: "container",
+      target: containerRef.current,
+      ...config
+    });
+    if (viewer) {
+      viewerRef.current = viewer;
+      onInit == null ? void 0 : onInit(viewer);
+      if (onReady) {
+        viewer.registry.then(onReady);
+      }
+    }
+    return () => {
+      if (viewerRef.current && containerRef.current) {
+        containerRef.current.innerHTML = "";
+        viewerRef.current = null;
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className, style });
+});
+export {
+  PDFViewer,
+  PDFViewer as default
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":["import {\n  useRef,\n  useEffect,\n  useImperativeHandle,\n  forwardRef,\n  type ForwardedRef,\n  type CSSProperties,\n} from 'react';\nimport EmbedPDF, {\n  type EmbedPdfContainer,\n  type PDFViewerConfig,\n  type PluginRegistry,\n} from '@embedpdf/snippet';\n\n// Re-export everything from snippet for convenience\nexport * from '@embedpdf/snippet';\n\nexport interface PDFViewerProps {\n  /** Full configuration for the PDF viewer */\n  config?: PDFViewerConfig;\n  /** CSS class name for the container div */\n  className?: string;\n  /** Inline styles for the container div */\n  style?: CSSProperties;\n  /** Callback when the viewer is initialized */\n  onInit?: (container: EmbedPdfContainer) => void;\n  /** Callback when the registry is ready */\n  onReady?: (registry: PluginRegistry) => void;\n}\n\nexport interface PDFViewerRef {\n  /** The EmbedPdfContainer element */\n  container: EmbedPdfContainer | null;\n  /** Promise that resolves to the PluginRegistry */\n  registry: Promise<PluginRegistry> | null;\n}\n\n/**\n * React component for embedding PDF documents\n *\n * @example\n * ```tsx\n * import { PDFViewer } from '@embedpdf/react-pdf-viewer';\n *\n * function App() {\n *   return (\n *     <PDFViewer\n *       config={{\n *         src: '/document.pdf',\n *         theme: { preference: 'system' },\n *       }}\n *       style={{ width: '100%', height: '100vh' }}\n *       onReady={(registry) => {\n *         console.log('PDF viewer ready', registry);\n *       }}\n *     />\n *   );\n * }\n * ```\n */\nexport const PDFViewer = forwardRef(function PDFViewer(\n  props: PDFViewerProps,\n  ref: ForwardedRef<PDFViewerRef>,\n) {\n  const { config = {}, className, style, onInit, onReady } = props;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const viewerRef = useRef<EmbedPdfContainer | null>(null);\n\n  useImperativeHandle(ref, () => ({\n    get container() {\n      return viewerRef.current;\n    },\n    get registry() {\n      return viewerRef.current?.registry ?? null;\n    },\n  }));\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    // Initialize the viewer with the config prop\n    const viewer = EmbedPDF.init({\n      type: 'container',\n      target: containerRef.current,\n      ...config,\n    });\n\n    if (viewer) {\n      viewerRef.current = viewer;\n      onInit?.(viewer);\n\n      // Call onReady when registry is available\n      if (onReady) {\n        viewer.registry.then(onReady);\n      }\n    }\n\n    return () => {\n      // Cleanup: remove the viewer element\n      if (viewerRef.current && containerRef.current) {\n        containerRef.current.innerHTML = '';\n        viewerRef.current = null;\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return <div ref={containerRef} className={className} style={style} />;\n});\n\nexport default PDFViewer;\n"],"names":["PDFViewer","EmbedPDF"],"mappings":";;;;AA4DO,MAAM,YAAY,WAAW,SAASA,WAC3C,OACA,KACA;AACA,QAAM,EAAE,SAAS,IAAI,WAAW,OAAO,QAAQ,YAAY;AAC3D,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,YAAY,OAAiC,IAAI;AAEvD,sBAAoB,KAAK,OAAO;AAAA,IAC9B,IAAI,YAAY;AACd,aAAO,UAAU;AAAA,IACnB;AAAA,IACA,IAAI,WAAW;;AACb,eAAO,eAAU,YAAV,mBAAmB,aAAY;AAAA,IACxC;AAAA,EAAA,EACA;AAEF,YAAU,MAAM;AACd,QAAI,CAAC,aAAa,QAAS;AAG3B,UAAM,SAASC,kBAAS,KAAK;AAAA,MAC3B,MAAM;AAAA,MACN,QAAQ,aAAa;AAAA,MACrB,GAAG;AAAA,IAAA,CACJ;AAED,QAAI,QAAQ;AACV,gBAAU,UAAU;AACpB,uCAAS;AAGT,UAAI,SAAS;AACX,eAAO,SAAS,KAAK,OAAO;AAAA,MAC9B;AAAA,IACF;AAEA,WAAO,MAAM;AAEX,UAAI,UAAU,WAAW,aAAa,SAAS;AAC7C,qBAAa,QAAQ,YAAY;AACjC,kBAAU,UAAU;AAAA,MACtB;AAAA,IACF;AAAA,EAEF,GAAG,CAAA,CAAE;AAEL,SAAO,oBAAC,OAAA,EAAI,KAAK,cAAc,WAAsB,OAAc;AACrE,CAAC;"}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@embedpdf/react-pdf-viewer",
+  "version": "1.0.0",
+  "description": "React component for embedding PDF documents",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "@embedpdf/snippet": "1.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "rimraf": "^5.0.5",
+    "typescript": "^5.1.6",
+    "unplugin-dts": "1.0.0-beta.6",
+    "vite": "^6.3.5"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "keywords": [
+    "react",
+    "pdf",
+    "viewer",
+    "embed",
+    "document"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/embedpdf/embed-pdf-viewer.git",
+    "directory": "viewers/react"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "pnpm run clean && vite build"
+  }
+}