@embedpdf/react-pdf-viewer 1.0.0 → 2.0.0-next.3
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/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +11 -6
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"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:
|
|
1
|
+
"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:l,style:i,onInit:o,onReady:c}=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;let e=!0;const r=a.current,n=t.init({type:"container",target:r,...s});return n&&(f.current=n,null==o||o(n),c&&n.registry.then(r=>{e&&c(r)})),()=>{e=!1,r.innerHTML="",f.current=null}},[]),e.jsx("div",{ref:a,className:l,style:i})});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]})});
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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:
|
|
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 // Track if this effect instance is still active (for Strict Mode)\n let isActive = true;\n\n // IMPORTANT: Capture the container reference in a closure\n // This ensures we can clean up even after React unmounts the component\n const containerElement = containerRef.current;\n\n // Initialize the viewer with the config prop\n const viewer = EmbedPDF.init({\n type: 'container',\n target: containerElement,\n ...config,\n });\n\n if (viewer) {\n viewerRef.current = viewer;\n onInit?.(viewer);\n\n // Call onReady when registry is available, but only if still active\n if (onReady) {\n viewer.registry.then((registry) => {\n // Only call onReady if this effect instance is still active\n // This prevents stale callbacks in React Strict Mode\n if (isActive) {\n onReady(registry);\n }\n });\n }\n }\n\n return () => {\n // Mark this effect instance as inactive\n isActive = false;\n\n // Cleanup: remove the viewer element using captured reference\n // We use the captured containerElement instead of containerRef.current\n // because React may have already unmounted and cleared the ref\n containerElement.innerHTML = '';\n viewerRef.current = null;\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","isActive","containerElement","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,MAyDnD,OAvDAE,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,IAAII,GAAW,EAIf,MAAMC,EAAmBV,EAAaK,QAGhCM,EAASC,EAASC,KAAK,CAC3BC,KAAM,YACNC,OAAQL,KACLf,IAmBL,OAhBIgB,IACFT,EAAUG,QAAUM,EACpB,MAAAb,GAAAA,EAASa,GAGLZ,GACFY,EAAOL,SAASU,KAAMV,IAGhBG,GACFV,EAAQO,MAMT,KAELG,GAAW,EAKXC,EAAiBO,UAAY,GAC7Bf,EAAUG,QAAU,OAGrB,IAEIa,EAAAA,IAAC,MAAA,CAAIxB,IAAKM,EAAcJ,YAAsBC,SACvD"}
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,yGAgEpB,CAAC;AAEH,eAAe,SAAS,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -17,23 +17,28 @@ const PDFViewer = forwardRef(function PDFViewer2(props, ref) {
|
|
|
17
17
|
}));
|
|
18
18
|
useEffect(() => {
|
|
19
19
|
if (!containerRef.current) return;
|
|
20
|
+
let isActive = true;
|
|
21
|
+
const containerElement = containerRef.current;
|
|
20
22
|
const viewer = EmbedPDF__default.init({
|
|
21
23
|
type: "container",
|
|
22
|
-
target:
|
|
24
|
+
target: containerElement,
|
|
23
25
|
...config
|
|
24
26
|
});
|
|
25
27
|
if (viewer) {
|
|
26
28
|
viewerRef.current = viewer;
|
|
27
29
|
onInit == null ? void 0 : onInit(viewer);
|
|
28
30
|
if (onReady) {
|
|
29
|
-
viewer.registry.then(
|
|
31
|
+
viewer.registry.then((registry) => {
|
|
32
|
+
if (isActive) {
|
|
33
|
+
onReady(registry);
|
|
34
|
+
}
|
|
35
|
+
});
|
|
30
36
|
}
|
|
31
37
|
}
|
|
32
38
|
return () => {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
39
|
+
isActive = false;
|
|
40
|
+
containerElement.innerHTML = "";
|
|
41
|
+
viewerRef.current = null;
|
|
37
42
|
};
|
|
38
43
|
}, []);
|
|
39
44
|
return /* @__PURE__ */ jsx("div", { ref: containerRef, className, style });
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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:
|
|
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 // Track if this effect instance is still active (for Strict Mode)\n let isActive = true;\n\n // IMPORTANT: Capture the container reference in a closure\n // This ensures we can clean up even after React unmounts the component\n const containerElement = containerRef.current;\n\n // Initialize the viewer with the config prop\n const viewer = EmbedPDF.init({\n type: 'container',\n target: containerElement,\n ...config,\n });\n\n if (viewer) {\n viewerRef.current = viewer;\n onInit?.(viewer);\n\n // Call onReady when registry is available, but only if still active\n if (onReady) {\n viewer.registry.then((registry) => {\n // Only call onReady if this effect instance is still active\n // This prevents stale callbacks in React Strict Mode\n if (isActive) {\n onReady(registry);\n }\n });\n }\n }\n\n return () => {\n // Mark this effect instance as inactive\n isActive = false;\n\n // Cleanup: remove the viewer element using captured reference\n // We use the captured containerElement instead of containerRef.current\n // because React may have already unmounted and cleared the ref\n containerElement.innerHTML = '';\n viewerRef.current = null;\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,QAAI,WAAW;AAIf,UAAM,mBAAmB,aAAa;AAGtC,UAAM,SAASC,kBAAS,KAAK;AAAA,MAC3B,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,GAAG;AAAA,IAAA,CACJ;AAED,QAAI,QAAQ;AACV,gBAAU,UAAU;AACpB,uCAAS;AAGT,UAAI,SAAS;AACX,eAAO,SAAS,KAAK,CAAC,aAAa;AAGjC,cAAI,UAAU;AACZ,oBAAQ,QAAQ;AAAA,UAClB;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAEA,WAAO,MAAM;AAEX,iBAAW;AAKX,uBAAiB,YAAY;AAC7B,gBAAU,UAAU;AAAA,IACtB;AAAA,EAEF,GAAG,CAAA,CAAE;AAEL,SAAO,oBAAC,OAAA,EAAI,KAAK,cAAc,WAAsB,OAAc;AACrE,CAAC;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@embedpdf/react-pdf-viewer",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0-next.3",
|
|
4
4
|
"description": "React component for embedding PDF documents",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"README.md"
|
|
21
21
|
],
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@embedpdf/snippet": "
|
|
23
|
+
"@embedpdf/snippet": "2.0.0-next.3"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"@types/react": "^18.2.0",
|