@react-pdf-kit/viewer 2.0.1-rc.2 → 2.0.1-rc.4

package/README.md

@@ -36,10 +36,6 @@
 
 As developers ourselves, we faced many issues such as browser incompatibility and customizability while trying to render a PDF document or working with PDF libraries. Having faced issues using PDF libraries, we want the solution to be flexible for React.js developers and teams. More importantly, the technical document must be easy to use!
 
-# 📜 Background
-
-As developers ourselves, we faced many issues such as browser incompatibility and customizability while trying to render a PDF document or working with PDF libraries. Having faced issues using PDF libraries, we want the solution to be flexible for React.js developers and teams. More importantly, the technical document must be easy to use!
-
 # :sparkles: Features
 
 - 🎯 **Interactive & Immersive Viewing Experience** with features like rotation, zoom, and keyboard navigation.

package/dist/utils/hooks/useLicense.js

@@ -1,6 +1,6 @@
 import { useState as E, useCallback as h, useEffect as A } from "react";
 import { appConsole as l } from "../appConsole.js";
-const b = /* @__PURE__ */ new Date("2026-02-24T10:02:24.424Z"), d = "Please visit https://www.react-pdf.dev/manage-license/ to generate a new license key.", s = {
+const b = /* @__PURE__ */ new Date("2026-02-26T06:29:55.254Z"), d = "Please visit https://www.react-pdf.dev/manage-license/ to generate a new license key.", s = {
   invalidLicense: `You are currently using without a valid license. ${d}`,
   mismatchedDomain: `Your license key is not valid for the current domain / IP. ${d}`,
   expired: `Your license key has expired. ${d}`,

package/dist/utils/hooks/usePrint.js

@@ -1,6 +1,6 @@
-import { useState as m, useRef as X, useEffect as D, useCallback as g } from "react";
-import { useDocumentContext as k } from "../../contexts/RPDocumentContext.js";
-import { PixelsPerInch as q, AnnotationMode as O, RenderingCancelledException as U } from "pdfjs-dist";
+import { useState as g, useRef as k, useEffect as D, useCallback as P } from "react";
+import { useDocumentContext as q } from "../../contexts/RPDocumentContext.js";
+import { PixelsPerInch as V, AnnotationMode as O, RenderingCancelledException as U } from "pdfjs-dist";
 import "react/jsx-runtime";
 import "./useLoadPdf.js";
 import "../types.js";
@@ -13,82 +13,82 @@ import "./usePdfProperties.js";
 import "../convertPdfDate.js";
 import "../formatFileSize.js";
 const re = () => {
-  const { pdf: p, pages: f } = k(), [R, E] = m({
+  const { pdf: l, pages: f } = q(), [R, E] = g({
     loadedPages: 0,
     totalPages: 0,
     percentage: 0
-  }), [T, y] = m(!1), [A, b] = m(!1), [Z, C] = m(null), [M, P] = m(void 0), o = X(!1);
+  }), [T, y] = g(!1), [A, b] = g(!1), [Z, C] = g(null), [M, w] = g(void 0), i = k(!1);
   D(() => {
-    o.current;
-  }, [o]);
-  const S = g(() => {
+    i.current;
+  }, [i]);
+  const S = P(() => {
     document.documentElement.classList.remove("rp-print-html-printing"), document.body.classList.remove("rp-print-body-printing");
     const e = document.querySelector(".rp-print-zone");
     e && e.remove();
-  }, []), i = g(() => {
-    o.current = !1, y(!1), b(!1), C(null), P(void 0), E({
+  }, []), s = P(() => {
+    i.current = !1, y(!1), b(!1), C(null), w(void 0), E({
       loadedPages: 0,
       totalPages: 0,
       percentage: 0
     });
   }, []), F = () => {
-    o.current = !0;
+    i.current = !0;
   }, I = async ({
     scratchCanvas: e,
     pdfDocument: n,
     pageNumber: t,
     viewerPdfPage: r,
-    printResolution: s,
-    optionalContentConfigPromise: l,
-    printAnnotationStoragePromise: w
+    printResolution: o,
+    optionalContentConfigPromise: c,
+    printAnnotationStoragePromise: u
   }) => {
-    if (o.current) {
-      i();
+    if (i.current) {
+      s();
       return;
     }
-    const a = s / q.PDF;
+    const a = o / V.PDF;
     e.width = Math.floor(r.width * a), e.height = Math.floor(r.height * a);
-    const c = e.getContext("2d");
-    c.save(), c.fillStyle = "rgb(255, 255, 255)", c.fillRect(0, 0, e.width, e.height), c.restore();
-    const [u, h] = await Promise.all([
+    const p = e.getContext("2d");
+    p.save(), p.fillStyle = "rgb(255, 255, 255)", p.fillRect(0, 0, e.width, e.height), p.restore();
+    const [m, h] = await Promise.all([
       n.getPage(t),
-      w
+      u
     ]);
-    if (o.current) {
-      i();
+    if (i.current) {
+      s();
       return;
     }
     const v = {
       canvas: e,
-      canvasContext: c,
+      canvasContext: p,
       transform: [a, 0, 0, a, 0, 0],
-      viewport: u.getViewport({ scale: 1, rotation: r.rotation }),
+      viewport: m.getViewport({ scale: 1, rotation: r.rotation }),
       intent: "print",
       annotationMode: O.ENABLE_STORAGE,
-      optionalContentConfigPromise: l,
+      optionalContentConfigPromise: c,
       printAnnotationStorage: h
     };
     try {
-      return u.render(v).promise;
+      return m.render(v).promise;
     } catch (d) {
       throw d instanceof U || console.error(d), d;
     }
-  }, L = g(() => {
+  }, L = P(() => {
     const e = window.print;
     return new Promise((n) => {
-      const t = (l) => {
+      const t = (c) => {
         setTimeout(() => {
-          e.call(window), setTimeout(() => l(), 20);
+          e.call(window), setTimeout(() => c(), 20);
         }, 0);
       };
       if (document.querySelector(".rp-print-zone")) {
         t(n);
         return;
       }
-      const s = new MutationObserver(() => {
-        document.querySelector(".rp-print-zone") && (t(n), s.disconnect());
+      const o = new MutationObserver(() => {
+        document.querySelector(".rp-print-zone") && (t(n), o.disconnect());
       });
-      s.observe(document.body, { childList: !0, subtree: !0 });
+      o.observe(document.body, { childList: !0, subtree: !0 });
     });
   }, []), z = (e) => {
     const n = document.createElement("img"), t = document.createElement("div");
@@ -96,70 +96,74 @@ const re = () => {
   }, x = (e, n) => {
     const t = document.createElement("div");
     t.classList.add("rp-print-zone");
-    const r = document.createElement("style");
-    return n.get(1) && (r.innerHTML = "@page { size: 100% 100%; margin: 0; }"), t.appendChild(r), t.append(...e), t;
-  }, N = g(
+    const r = document.createElement("style"), o = n.get(1);
+    if (o) {
+      const c = o.page.getViewport({ scale: 1 }), { width: u, height: a } = c;
+      r.innerHTML = `@page { size: ${u}pt ${a}pt; margin: 0; }`;
+    }
+    return t.appendChild(r), t.append(...e), t;
+  }, N = P(
     async (e) => {
-      if (!p)
+      if (!l)
         return;
-      i();
+      s();
       const n = e && "visibleDefaultProgress" in e ? e : void 0;
-      (n == null ? void 0 : n.visibleDefaultProgress) !== void 0 ? P(n.visibleDefaultProgress) : P(!0);
+      (n == null ? void 0 : n.visibleDefaultProgress) !== void 0 ? w(n.visibleDefaultProgress) : w(!0);
       const t = document.createElement("canvas"), r = [];
       try {
-        p.isPureXfa && console.warn("[rp] XFA Form is not supported at the moment.");
-        const l = p.getOptionalContentConfig({ intent: "print" }), w = Promise.resolve(
-          p.annotationStorage.print ?? void 0
+        l.isPureXfa && console.warn("[rp] XFA Form is not supported at the moment.");
+        const c = l.getOptionalContentConfig({ intent: "print" }), u = Promise.resolve(
+          l.annotationStorage.print ?? void 0
         ), a = f.size;
-        for (const [u, h] of f) {
-          if (o.current) {
-            i();
+        for (const [m, h] of f) {
+          if (i.current) {
+            s();
             return;
           }
           const v = h.page.getViewport({ scale: 1 });
           if (await I({
             scratchCanvas: t,
-            pdfDocument: p,
-            pageNumber: u,
+            pdfDocument: l,
+            pageNumber: m,
             viewerPdfPage: v,
             printResolution: 150,
-            optionalContentConfigPromise: l,
-            printAnnotationStoragePromise: w
-          }), o.current) {
-            i();
+            optionalContentConfigPromise: c,
+            printAnnotationStoragePromise: u
+          }), i.current) {
+            s();
             return;
           }
           const d = z(t);
           r.push(d);
-          const V = parseFloat((r.length / a * 100).toFixed(2));
+          const X = parseFloat((r.length / a * 100).toFixed(2));
           E({
-            loadedPages: u,
+            loadedPages: m,
             totalPages: a,
-            percentage: V
+            percentage: X
           });
         }
-        if (o.current) {
-          i();
+        if (i.current) {
+          s();
           return;
         }
-        const c = x(r, f);
-        document.body.appendChild(c), document.documentElement.classList.add("rp-print-html-printing"), document.body.classList.add("rp-print-body-printing"), y(!0), await L();
-      } catch (s) {
-        b(!0), s instanceof Error && C(s);
+        const p = x(r, f);
+        document.body.appendChild(p), document.documentElement.classList.add("rp-print-html-printing"), document.body.classList.add("rp-print-body-printing"), y(!0), await L();
+      } catch (o) {
+        b(!0), o instanceof Error && C(o);
       } finally {
         t.height = 0, t.width = 0;
       }
     },
-    [p, f, o, i, x, L]
+    [l, f, i, s, x, L]
   );
   return D(() => {
     const e = () => {
-      i(), S();
+      s(), S();
     };
     return window.addEventListener("afterprint", e, !0), () => {
       window.removeEventListener("afterprint", e, !0);
     };
-  }, [S, i]), {
+  }, [S, s]), {
     print: N,
     cancel: F,
     progress: R,

package/dist/utils/injectPrintCSS.js

@@ -12,7 +12,7 @@ function e() {
     .rp-print-zone { display: block; height: 100%; }
     .rp-print-page { display: flex; align-items: center; flex-direction: column; justify-content: center; height: 100%; width: 100%; page-break-after: always; page-break-inside: avoid; }
     .rp-print-page:last-child { page-break-after: auto; }
-    .rp-print-page img, .rp-print-page canvas { display: block; height: 100%; width: 100%; direction: ltr; }
+    .rp-print-page img, .rp-print-page canvas { display: block; max-width: 100%; max-height: 100%; direction: ltr; }
   }
   `, document.head.appendChild(t);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-pdf-kit/viewer",
-  "version": "2.0.1-rc.2",
+  "version": "2.0.1-rc.4",
   "private": false,
   "description": "A react-pdf-viewer component for React and Next.js. Suitable for react-pdf document.",
   "keywords": [