.github/workflows/publish.yml

@@ -33,23 +33,27 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: '20'
+          registry-url: 'https://registry.npmjs.org'
 
       - name: Enable Corepack
         run: corepack enable
 
       - name: Install dependencies
         run: yarn --immutable
 
+      - name: Generate archive
+        run: yarn pack
+
       - name: Publish with latest tag
         if: github.event.release.prelease == false
-        run: yarn npm publish --tag latest
+        run: npm publish package.tgz --tag latest --provenance
         working-directory: packages/react-pdf
         env:
-          YARN_NPM_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - name: Publish with next tag
         if: github.event.release.prelease == true
-        run: yarn npm publish --tag next
+        run: npm publish package.tgz --tag next --provenance
         working-directory: packages/react-pdf
         env:
-          YARN_NPM_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

packages/react-pdf/README.md

@@ -569,20 +569,18 @@ The MIT License.
 
 <table>
   <tr>
-    <td>
-      <img src="https://github.com/wojtekmaj.png?s=100" width="100">
+    <td >
+      <img src="https://avatars.githubusercontent.com/u/5426427?v=4&s=128" width="64" height="64" alt="Wojciech Maj">
     </td>
     <td>
-      Wojciech Maj<br />
-      <a href="mailto:kontakt@wojtekmaj.pl">kontakt@wojtekmaj.pl</a><br />
-      <a href="https://wojtekmaj.pl">https://wojtekmaj.pl</a>
+      <a href="https://github.com/wojtekmaj">Wojciech Maj</a>
     </td>
   </tr>
 </table>
 
 ## Thank you
 
-This project wouldn't be possible without the awesome work of Niklas Närhinen <niklas@narhinen.net> who created its original version and without Mozilla, author of [pdf.js](http://mozilla.github.io/pdf.js). Thank you!
+This project wouldn't be possible without the awesome work of [Niklas Närhinen](https://github.com/nnarhinen) who created its original version and without Mozilla, author of [pdf.js](http://mozilla.github.io/pdf.js). Thank you!
 
 ### Sponsors
 

packages/react-pdf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-pdf",
-  "version": "7.5.0",
+  "version": "7.5.1",
   "description": "Display PDFs in your React app as easily as if they were images.",
   "type": "module",
   "sideEffects": [
@@ -31,8 +31,8 @@
   "scripts": {
     "build": "yarn build-js && yarn copy-styles",
     "build-js": "yarn build-js-esm && yarn build-js-cjs && yarn build-js-cjs-package",
-    "build-js-esm": "tsc --project tsconfig.build.json --outDir dist/esm --module esnext",
-    "build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs",
+    "build-js-esm": "tsc --project tsconfig.build.json --outDir dist/esm",
+    "build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs --verbatimModuleSyntax false",
     "build-js-cjs-package": "echo '{\n  \"type\": \"commonjs\"\n}' > dist/cjs/package.json",
     "clean": "rimraf dist",
     "copy-styles": "cpy 'src/**/*.css' dist/esm && cpy 'src/**/*.css' dist/cjs",

packages/react-pdf/src/StructTree.spec.tsx

@@ -13,7 +13,7 @@ import PageContext from './PageContext.js';
 
 import type { PDFPageProxy } from 'pdfjs-dist';
 import type { PageContextType } from './shared/types.js';
-import { StructTreeNode } from 'pdfjs-dist/types/src/display/api.js';
+import type { StructTreeNode } from 'pdfjs-dist/types/src/display/api.js';
 
 const pdfFile = loadPDF('./../../__mocks__/_pdf.pdf');
 

packages/react-pdf/tsconfig.json

@@ -4,11 +4,13 @@
     "esModuleInterop": true,
     "isolatedModules": true,
     "jsx": "react",
+    "module": "esnext",
     "moduleResolution": "node",
     "noUncheckedIndexedAccess": true,
     "outDir": "dist",
     "strict": true,
-    "target": "es2015"
+    "target": "es2015",
+    "verbatimModuleSyntax": true
   },
   "include": ["src"]
 }

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",

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 {

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>

sample/create-react-app-5/tsconfig.json

@@ -5,10 +5,11 @@
     "isolatedModules": true,
     "jsx": "react-jsx",
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "noUncheckedIndexedAccess": true,
     "outDir": "dist",
     "strict": true,
-    "target": "es2015"
+    "target": "es2015",
+    "verbatimModuleSyntax": true
   }
 }

sample/create-react-app-5/yarn.lock

@@ -1577,8 +1577,8 @@ __metadata:
   linkType: hard
 
 "@babel/traverse@npm:^7.23.0, @babel/traverse@npm:^7.7.2":
-  version: 7.23.0
-  resolution: "@babel/traverse@npm:7.23.0"
+  version: 7.23.2
+  resolution: "@babel/traverse@npm:7.23.2"
   dependencies:
     "@babel/code-frame": ^7.22.13
     "@babel/generator": ^7.23.0
@@ -1590,7 +1590,7 @@ __metadata:
     "@babel/types": ^7.23.0
     debug: ^4.1.0
     globals: ^11.1.0
-  checksum: 0b17fae53269e1af2cd3edba00892bc2975ad5df9eea7b84815dab07dfec2928c451066d51bc65b4be61d8499e77db7e547ce69ef2a7b0eca3f96269cb43a0b0
+  checksum: 26a1eea0dde41ab99dde8b9773a013a0dc50324e5110a049f5d634e721ff08afffd54940b3974a20308d7952085ac769689369e9127dea655f868c0f6e1ab35d
   languageName: node
   linkType: hard
 
@@ -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"
@@ -8825,7 +8838,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.3.4":
+"nanoid@npm:^3.3.6":
   version: 3.3.6
   resolution: "nanoid@npm:3.3.6"
   bin:
@@ -10276,13 +10289,13 @@ __metadata:
   linkType: hard
 
 "postcss@npm:^8.0.9, postcss@npm:^8.3.5, postcss@npm:^8.4.19, postcss@npm:^8.4.4":
-  version: 8.4.21
-  resolution: "postcss@npm:8.4.21"
+  version: 8.4.31
+  resolution: "postcss@npm:8.4.31"
   dependencies:
-    nanoid: ^3.3.4
+    nanoid: ^3.3.6
     picocolors: ^1.0.0
     source-map-js: ^1.0.2
-  checksum: e39ac60ccd1542d4f9d93d894048aac0d686b3bb38e927d8386005718e6793dbbb46930f0a523fe382f1bbd843c6d980aaea791252bf5e176180e5a4336d9679
+  checksum: 1d8611341b073143ad90486fcdfeab49edd243377b1f51834dc4f6d028e82ce5190e4f11bb2633276864503654fb7cab28e67abdc0fbf9d1f88cad4a0ff0beea
   languageName: node
   linkType: hard
 
@@ -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

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 {

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>

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",