🤖 Merge PR #47751 [react-pdf] Add missing properties in PDFPageProxy interface by @queq1890

* Extend PDFPageProxy type

* Fix prettier error

types/react-pdf/dist/Page.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PDFPageProxy } from 'pdfjs-dist';
+import { PDFPageProxy as _PDFPageProxy } from 'pdfjs-dist';
 
 export type RenderFunction = () => JSX.Element;
 
@@ -37,6 +37,13 @@ export interface TextItem {
     fontName: string;
 }
 
+export interface PDFPageProxy extends _PDFPageProxy {
+    width: number;
+    height: number;
+    originalWidth: number;
+    originalHeight: number;
+}
+
 export interface Props {
     /**
      * Defines custom class name(s), that will be added to rendered element.
@@ -187,4 +194,4 @@ export interface Props {
     width?: number;
 }
 
-export default class Page extends React.Component<Props> { }
+export default class Page extends React.Component<Props> {}

types/react-pdf/react-pdf-tests.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Document, Page, pdfjs } from 'react-pdf';
+import { PDFPageProxy } from 'react-pdf/dist/Page';
 import { PDFDocumentProxy } from 'pdfjs-dist';
 
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
@@ -7,6 +8,8 @@ pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/$
 interface State {
     numPages: number | null;
     pageNumber: number;
+    originalHeight: number | null;
+    originalWidth: number | null;
 }
 
 export class MyApp extends React.Component<{}, State> {
@@ -15,6 +18,8 @@ export class MyApp extends React.Component<{}, State> {
         this.state = {
             numPages: null,
             pageNumber: 1,
+            originalHeight: null,
+            originalWidth: null,
         };
     }
 
@@ -22,18 +27,28 @@ export class MyApp extends React.Component<{}, State> {
         this.setState({ numPages });
     }
 
+    onPageLoadSuccess = ({ originalHeight, originalWidth }: PDFPageProxy) => {
+        this.setState({
+            originalHeight,
+            originalWidth,
+        });
+    }
+
     render() {
-        const { pageNumber, numPages } = this.state;
+        const { pageNumber, numPages, originalHeight, originalWidth } = this.state;
 
         return (
             <div>
-                <Document
-                    file="somefile.pdf"
-                    onLoadSuccess={this.onDocumentLoadSuccess}
-                >
-                    <Page pageNumber={pageNumber} />
+                <Document file="somefile.pdf" onLoadSuccess={this.onDocumentLoadSuccess}>
+                    <Page pageNumber={pageNumber} onLoadSuccess={this.onPageLoadSuccess} />
                 </Document>
-                <p>Page {pageNumber} of {numPages}</p>
+                <p>
+                    Page {pageNumber} of {numPages}
+                </p>
+                <p>
+                    PDF height: {originalHeight}
+                    PDF width: {originalWidth}
+                </p>
             </div>
         );
     }