Use ResizeObserver, not CSS max-width, to resize pages

wojtekmaj · Oct 12, 2023 · e1e4635 · e1e4635
1 parent 42ecc84
commit e1e4635
Show file tree

Hide file tree

Showing 28 changed files with 324 additions and 77 deletions.
diff --git a/sample/create-react-app-5/package.json b/sample/create-react-app-5/package.json
@@ -21,6 +21,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@wojtekmaj/react-hooks": "^1.18.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-pdf": "latest",

diff --git a/sample/create-react-app-5/src/Sample.css b/sample/create-react-app-5/src/Sample.css
@@ -1,7 +1,10 @@
 body {
   margin: 0;
   background-color: #525659;
-  font-family: Segoe UI, Tahoma, sans-serif;
+  font-family:
+    Segoe UI,
+    Tahoma,
+    sans-serif;
 }
 
 .Example input,
@@ -35,6 +38,8 @@ body {
 }
 
 .Example__container__document {
+  width: 100%;
+  max-width: calc(100% - 2em);
   margin: 1em 0;
 }
 
@@ -45,14 +50,8 @@ body {
 }
 
 .Example__container__document .react-pdf__Page {
-  max-width: calc(100% - 2em);
+  margin: 1em 0;
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
-  margin: 1em;
-}
-
-.Example__container__document .react-pdf__Page canvas {
-  max-width: 100%;
-  height: auto !important;
 }
 
 .Example__container__document .react-pdf__message {

diff --git a/sample/create-react-app-5/src/Sample.tsx b/sample/create-react-app-5/src/Sample.tsx
@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
+import { useResizeObserver } from '@wojtekmaj/react-hooks';
 import { pdfjs, Document, Page } from 'react-pdf';
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import 'react-pdf/dist/esm/Page/TextLayer.css';
@@ -17,11 +18,27 @@ const options = {
   standardFontDataUrl: '/standard_fonts/',
 };
 
+const resizeObserverOptions = {};
+
+const maxWidth = 800;
+
 type PDFFile = string | File | null;
 
 export default function Sample() {
   const [file, setFile] = useState<PDFFile>('./sample.pdf');
   const [numPages, setNumPages] = useState<number>();
+  const [containerRef, setContainerRef] = useState<HTMLElement | null>(null);
+  const [containerWidth, setContainerWidth] = useState<number>();
+
+  const onResize = useCallback<ResizeObserverCallback>((entries) => {
+    const [entry] = entries;
+
+    if (entry) {
+      setContainerWidth(entry.contentRect.width);
+    }
+  }, []);
+
+  useResizeObserver(containerRef, resizeObserverOptions, onResize);
 
   function onFileChange(event: React.ChangeEvent<HTMLInputElement>): void {
     const { files } = event.target;
@@ -45,10 +62,14 @@ export default function Sample() {
           <label htmlFor="file">Load from file:</label>{' '}
           <input onChange={onFileChange} type="file" />
         </div>
-        <div className="Example__container__document">
+        <div className="Example__container__document" ref={setContainerRef}>
           <Document file={file} onLoadSuccess={onDocumentLoadSuccess} options={options}>
             {Array.from(new Array(numPages), (el, index) => (
-              <Page key={`page_${index + 1}`} pageNumber={index + 1} />
+              <Page
+                key={`page_${index + 1}`}
+                pageNumber={index + 1}
+                width={containerWidth ? Math.min(containerWidth, maxWidth) : maxWidth}
+              />
             ))}
           </Document>
         </div>

diff --git a/sample/create-react-app-5/yarn.lock b/sample/create-react-app-5/yarn.lock
@@ -3283,6 +3283,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@wojtekmaj/react-hooks@npm:^1.18.0":
+  version: 1.18.0
+  resolution: "@wojtekmaj/react-hooks@npm:1.18.0"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 968a776fff04334153feea85b9ca498f791b15a356bae65da01d3bb1541720d8c8b4252daab01536d638c43bf32d0aa7a14cc3713ceadf582c2937e2bf8670f6
+  languageName: node
+  linkType: hard
+
 "@xtuc/ieee754@npm:^1.2.0":
   version: 1.2.0
   resolution: "@xtuc/ieee754@npm:1.2.0"
@@ -10576,6 +10589,7 @@ __metadata:
   resolution: "react-pdf-sample-page-create-react-app-5@workspace:."
   dependencies:
     "@types/node": "*"
+    "@wojtekmaj/react-hooks": ^1.18.0
     react: ^18.2.0
     react-dom: ^18.2.0
     react-pdf: latest

diff --git a/sample/next-app/app/Sample.css b/sample/next-app/app/Sample.css
@@ -1,7 +1,10 @@
 body {
   margin: 0;
   background-color: #525659;
-  font-family: Segoe UI, Tahoma, sans-serif;
+  font-family:
+    Segoe UI,
+    Tahoma,
+    sans-serif;
 }
 
 .Example input,
@@ -35,6 +38,8 @@ body {
 }
 
 .Example__container__document {
+  width: 100%;
+  max-width: calc(100% - 2em);
   margin: 1em 0;
 }
 
@@ -45,14 +50,8 @@ body {
 }
 
 .Example__container__document .react-pdf__Page {
-  max-width: calc(100% - 2em);
+  margin: 1em 0;
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
-  margin: 1em;
-}
-
-.Example__container__document .react-pdf__Page canvas {
-  max-width: 100%;
-  height: auto !important;
 }
 
 .Example__container__document .react-pdf__message {

diff --git a/sample/next-app/app/Sample.tsx b/sample/next-app/app/Sample.tsx
@@ -1,6 +1,7 @@
 'use client';
 
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
+import { useResizeObserver } from '@wojtekmaj/react-hooks';
 import { pdfjs, Document, Page } from 'react-pdf';
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import 'react-pdf/dist/esm/Page/TextLayer.css';
@@ -19,11 +20,27 @@ const options = {
   standardFontDataUrl: '/standard_fonts/',
 };
 
+const resizeObserverOptions = {};
+
+const maxWidth = 800;
+
 type PDFFile = string | File | null;
 
 export default function Sample() {
   const [file, setFile] = useState<PDFFile>('./sample.pdf');
   const [numPages, setNumPages] = useState<number>();
+  const [containerRef, setContainerRef] = useState<HTMLElement | null>(null);
+  const [containerWidth, setContainerWidth] = useState<number>();
+
+  const onResize = useCallback<ResizeObserverCallback>((entries) => {
+    const [entry] = entries;
+
+    if (entry) {
+      setContainerWidth(entry.contentRect.width);
+    }
+  }, []);
+
+  useResizeObserver(containerRef, resizeObserverOptions, onResize);
 
   function onFileChange(event: React.ChangeEvent<HTMLInputElement>): void {
     const { files } = event.target;
@@ -47,10 +64,14 @@ export default function Sample() {
           <label htmlFor="file">Load from file:</label>{' '}
           <input onChange={onFileChange} type="file" />
         </div>
-        <div className="Example__container__document">
+        <div className="Example__container__document" ref={setContainerRef}>
           <Document file={file} onLoadSuccess={onDocumentLoadSuccess} options={options}>
             {Array.from(new Array(numPages), (el, index) => (
-              <Page key={`page_${index + 1}`} pageNumber={index + 1} />
+              <Page
+                key={`page_${index + 1}`}
+                pageNumber={index + 1}
+                width={containerWidth ? Math.min(containerWidth, maxWidth) : maxWidth}
+              />
             ))}
           </Document>
         </div>

diff --git a/sample/next-app/package.json b/sample/next-app/package.json
@@ -15,6 +15,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@wojtekmaj/react-hooks": "^1.18.0",
     "next": "^13.5.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/sample/next-app/yarn.lock b/sample/next-app/yarn.lock
@@ -162,6 +162,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@wojtekmaj/react-hooks@npm:^1.18.0":
+  version: 1.18.0
+  resolution: "@wojtekmaj/react-hooks@npm:1.18.0"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 968a776fff04334153feea85b9ca498f791b15a356bae65da01d3bb1541720d8c8b4252daab01536d638c43bf32d0aa7a14cc3713ceadf582c2937e2bf8670f6
+  languageName: node
+  linkType: hard
+
 "abbrev@npm:1, abbrev@npm:^1.0.0":
   version: 1.1.1
   resolution: "abbrev@npm:1.1.1"
@@ -1149,6 +1162,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "react-pdf-sample-page-next@workspace:."
   dependencies:
+    "@wojtekmaj/react-hooks": ^1.18.0
     next: ^13.5.4
     react: ^18.2.0
     react-dom: ^18.2.0

diff --git a/sample/next-pages/package.json b/sample/next-pages/package.json
@@ -15,6 +15,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@wojtekmaj/react-hooks": "^1.18.0",
     "next": "^13.5.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/sample/next-pages/pages/Sample.css b/sample/next-pages/pages/Sample.css
@@ -1,7 +1,10 @@
 body {
   margin: 0;
   background-color: #525659;
-  font-family: Segoe UI, Tahoma, sans-serif;
+  font-family:
+    Segoe UI,
+    Tahoma,
+    sans-serif;
 }
 
 .Example input,
@@ -35,6 +38,8 @@ body {
 }
 
 .Example__container__document {
+  width: 100%;
+  max-width: calc(100% - 2em);
   margin: 1em 0;
 }
 
@@ -45,14 +50,8 @@ body {
 }
 
 .Example__container__document .react-pdf__Page {
-  max-width: calc(100% - 2em);
+  margin: 1em 0;
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
-  margin: 1em;
-}
-
-.Example__container__document .react-pdf__Page canvas {
-  max-width: 100%;
-  height: auto !important;
 }
 
 .Example__container__document .react-pdf__message {

diff --git a/sample/next-pages/pages/Sample.tsx b/sample/next-pages/pages/Sample.tsx
@@ -1,8 +1,11 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
+import { useResizeObserver } from '@wojtekmaj/react-hooks';
 import { pdfjs, Document, Page } from 'react-pdf';
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import 'react-pdf/dist/esm/Page/TextLayer.css';
 
+import './Sample.css';
+
 import type { PDFDocumentProxy } from 'pdfjs-dist';
 
 pdfjs.GlobalWorkerOptions.workerSrc = new URL(
@@ -15,11 +18,27 @@ const options = {
   standardFontDataUrl: '/standard_fonts/',
 };
 
+const resizeObserverOptions = {};
+
+const maxWidth = 800;
+
 type PDFFile = string | File | null;
 
 export default function Sample() {
   const [file, setFile] = useState<PDFFile>('./sample.pdf');
   const [numPages, setNumPages] = useState<number>();
+  const [containerRef, setContainerRef] = useState<HTMLElement | null>(null);
+  const [containerWidth, setContainerWidth] = useState<number>();
+
+  const onResize = useCallback<ResizeObserverCallback>((entries) => {
+    const [entry] = entries;
+
+    if (entry) {
+      setContainerWidth(entry.contentRect.width);
+    }
+  }, []);
+
+  useResizeObserver(containerRef, resizeObserverOptions, onResize);
 
   function onFileChange(event: React.ChangeEvent<HTMLInputElement>): void {
     const { files } = event.target;
@@ -43,10 +62,14 @@ export default function Sample() {
           <label htmlFor="file">Load from file:</label>{' '}
           <input onChange={onFileChange} type="file" />
         </div>
-        <div className="Example__container__document">
+        <div className="Example__container__document" ref={setContainerRef}>
           <Document file={file} onLoadSuccess={onDocumentLoadSuccess} options={options}>
             {Array.from(new Array(numPages), (el, index) => (
-              <Page key={`page_${index + 1}`} pageNumber={index + 1} />
+              <Page
+                key={`page_${index + 1}`}
+                pageNumber={index + 1}
+                width={containerWidth ? Math.min(containerWidth, maxWidth) : maxWidth}
+              />
             ))}
           </Document>
         </div>

diff --git a/sample/next-pages/yarn.lock b/sample/next-pages/yarn.lock
@@ -169,6 +169,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@wojtekmaj/react-hooks@npm:^1.18.0":
+  version: 1.18.0
+  resolution: "@wojtekmaj/react-hooks@npm:1.18.0"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 968a776fff04334153feea85b9ca498f791b15a356bae65da01d3bb1541720d8c8b4252daab01536d638c43bf32d0aa7a14cc3713ceadf582c2937e2bf8670f6
+  languageName: node
+  linkType: hard
+
 "abbrev@npm:1, abbrev@npm:^1.0.0":
   version: 1.1.1
   resolution: "abbrev@npm:1.1.1"
@@ -1251,6 +1264,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "react-pdf-sample-page-next@workspace:."
   dependencies:
+    "@wojtekmaj/react-hooks": ^1.18.0
     next: ^13.5.4
     null-loader: ^4.0.1
     react: ^18.2.0