Remove PropTypes

See https://github.com/wojtekmaj/react-pdf/wiki/Upgrade-guide-from-version-7.x-to-8.x#proptypes-were-removed

Author: CyberAndrii

.eslintrc.json

@@ -22,6 +22,7 @@
             }
         ],
         "no-invalid-this": "error",
+        "react/require-default-props": "off",
         "react/function-component-definition": [
             "error",
             {

package-lock.json

@@ -34,7 +34,6 @@
   },
   "peerDependencies": {
     "lodash": "4.x",
-    "prop-types": "15.x",
     "pdfjs-dist": "4.x",
     "react": "18.x",
     "react-dom": "18.x"

package.json

@@ -1,5 +1,4 @@
 import React, {useState, useRef, useMemo, type ChangeEvent, type FormEventHandler} from 'react';
-import PropTypes from 'prop-types';
 
 import {pdfPasswordFormStyles as styles} from './styles';
 import {isSafari} from './helpers';
@@ -11,27 +10,6 @@ type Props = {
     onPasswordFieldFocus?: (isFocused: boolean) => void;
 };
 
-const propTypes = {
-    /** If the submitted password is invalid (show an error message) */
-    isPasswordInvalid: PropTypes.bool,
-
-    /** Notify parent that the password form has been submitted */
-    onSubmit: PropTypes.func,
-
-    /** Notify parent that the password has been updated/edited */
-    onPasswordChange: PropTypes.func,
-
-    /** Notify parent that a text field has been focused or blurred */
-    onPasswordFieldFocus: PropTypes.func,
-};
-
-const defaultProps = {
-    isPasswordInvalid: false,
-    onSubmit: () => {},
-    onPasswordChange: () => {},
-    onPasswordFieldFocus: () => {},
-};
-
 function PDFPasswordForm({isPasswordInvalid, onSubmit, onPasswordChange, onPasswordFieldFocus}: Props) {
     const [password, setPassword] = useState('');
     const [validationErrorText, setValidationErrorText] = useState('');
@@ -151,8 +129,6 @@ function PDFPasswordForm({isPasswordInvalid, onSubmit, onPasswordChange, onPassw
     );
 }
 
-PDFPasswordForm.propTypes = propTypes;
-PDFPasswordForm.defaultProps = defaultProps;
 PDFPasswordForm.displayName = 'PDFPasswordForm';
 
 export type {Props as PDFPasswordFormProps};

src/PDFPasswordForm.tsx

@@ -4,7 +4,6 @@ import pdfWorkerSource from 'pdfjs-dist/legacy/build/pdf.worker.mjs';
 import React, {memo, useCallback, useLayoutEffect, useRef, useState} from 'react';
 import type {CSSProperties, ReactNode} from 'react';
 import times from 'lodash/times';
-import PropTypes from 'prop-types';
 import {VariableSizeList as List} from 'react-window';
 import {Document, pdfjs} from 'react-pdf';
 import 'react-pdf/dist/Page/AnnotationLayer.css';
@@ -21,9 +20,9 @@ type Props = {
     file: string;
     pageMaxWidth: number;
     isSmallScreen: boolean;
-    maxCanvasWidth: number | null;
-    maxCanvasHeight: number | null;
-    maxCanvasArea: number | null;
+    maxCanvasWidth?: number;
+    maxCanvasHeight?: number;
+    maxCanvasArea?: number;
     renderPasswordForm?: ({isPasswordInvalid, onSubmit, onPasswordChange}: Omit<PDFPasswordFormProps, 'onPasswordFieldFocus'>) => ReactNode | null;
     LoadingComponent?: ReactNode;
     ErrorComponent?: ReactNode;
@@ -35,52 +34,24 @@ type Props = {
 
 type OnPasswordCallback = (password: string | null) => void;
 
-const propTypes = {
-    file: PropTypes.string.isRequired,
-    pageMaxWidth: PropTypes.number.isRequired,
-    isSmallScreen: PropTypes.bool.isRequired,
-    maxCanvasWidth: PropTypes.number,
-    maxCanvasHeight: PropTypes.number,
-    maxCanvasArea: PropTypes.number,
-    renderPasswordForm: PropTypes.func,
-    LoadingComponent: PropTypes.node,
-    ErrorComponent: PropTypes.node,
-    shouldShowErrorComponent: PropTypes.bool,
-    onLoadError: PropTypes.func,
-    // eslint-disable-next-line react/forbid-prop-types
-    containerStyle: PropTypes.object,
-    // eslint-disable-next-line react/forbid-prop-types
-    contentContainerStyle: PropTypes.object,
-};
-
-const defaultProps = {
-    maxCanvasWidth: null,
-    maxCanvasHeight: null,
-    maxCanvasArea: null,
-    renderPasswordForm: null,
-    LoadingComponent: <p>Loading...</p>,
-    ErrorComponent: <p>Failed to load the PDF file :(</p>,
-    shouldShowErrorComponent: true,
-    containerStyle: {},
-    contentContainerStyle: {},
-    onLoadError: () => {},
-};
-
 pdfjs.GlobalWorkerOptions.workerSrc = URL.createObjectURL(new Blob([pdfWorkerSource], {type: 'text/javascript'}));
 
+const DefaultLoadingComponent = <p>Loading...</p>;
+const DefaultErrorComponent = <p>Failed to load the PDF file :(</p>;
+
 function PDFPreviewer({
     file,
     pageMaxWidth,
     isSmallScreen,
     maxCanvasWidth,
     maxCanvasHeight,
     maxCanvasArea,
-    LoadingComponent,
-    ErrorComponent,
+    LoadingComponent = DefaultLoadingComponent,
+    ErrorComponent = DefaultErrorComponent,
     renderPasswordForm,
     containerStyle,
     contentContainerStyle,
-    shouldShowErrorComponent,
+    shouldShowErrorComponent = true,
     onLoadError,
 }: Props) {
     const [pageViewports, setPageViewports] = useState<PageViewport[]>([]);
@@ -285,7 +256,5 @@ function PDFPreviewer({
 }
 
 PDFPasswordForm.displayName = 'PDFPreviewer';
-PDFPreviewer.propTypes = propTypes;
-PDFPreviewer.defaultProps = defaultProps;
 
 export default memo(PDFPreviewer);

src/PDFPreviewer.tsx

@@ -1,5 +1,4 @@
 import React, {memo, type CSSProperties} from 'react';
-import PropTypes from 'prop-types';
 import {Page} from 'react-pdf';
 import {pdfPreviewerStyles as styles} from './styles';
 import {PAGE_BORDER} from './constants';
@@ -17,31 +16,6 @@ type Props = {
     };
 };
 
-const propTypes = {
-    /** Index of the PDF page to be displayed passed by VariableSizeList */
-    index: PropTypes.number.isRequired,
-
-    /** Page extra data passed by VariableSizeList's data prop */
-    data: PropTypes.shape({
-        /** Width of a single page in the document */
-        pageWidth: PropTypes.number.isRequired,
-        /** The estimated height of a single page in the document */
-        estimatedPageHeight: PropTypes.number.isRequired,
-        /** Function that calculates the height of a page given its index */
-        calculatePageHeight: PropTypes.func.isRequired,
-        /** Function that calculates the pixel ratio for a page given its calculated width and height */
-        getDevicePixelRatio: PropTypes.func.isRequired,
-        /** The number of pages in the document */
-        numPages: PropTypes.number.isRequired,
-        /** The height of the container view */
-        containerHeight: PropTypes.number.isRequired,
-    }).isRequired,
-
-    /** Additional style props passed by VariableSizeList */
-    // eslint-disable-next-line react/forbid-prop-types
-    style: PropTypes.object.isRequired,
-};
-
 function PageRenderer({index, style, data}: Props) {
     const {pageWidth, estimatedPageHeight, calculatePageHeight, getDevicePixelRatio, numPages, containerHeight} = data;
     /**
@@ -70,6 +44,5 @@ function PageRenderer({index, style, data}: Props) {
 }
 
 PageRenderer.displayName = 'PageRenderer';
-PageRenderer.propTypes = propTypes;
 
 export default memo(PageRenderer);