react-pdf - npm Package Compare versions

Comparing version 7.5.1 to 7.6.0

dist/cjs/Document.d.ts

@@ -1,4 +0,1 @@
-/**
- * Loads a PDF document. Passes it to all children.
- */
 import React from 'react';
@@ -13,50 +10,282 @@ import type { EventProps } from 'make-event-props';
     children?: React.ReactNode;
+    /**
+     * Class name(s) that will be added to rendered element along with the default `react-pdf__Document`.
+     *
+     * @example 'custom-class-name-1 custom-class-name-2'
+     * @example ['custom-class-name-1', 'custom-class-name-2']
+     */
     className?: ClassName;
+    /**
+     * What the component should display in case of an error.
+     *
+     * @default 'Failed to load PDF file.'
+     * @example 'An error occurred!'
+     * @example <p>An error occurred!</p>
+     * @example {this.renderError}
+     */
     error?: NodeOrRenderer;
+    /**
+     * Link rel for links rendered in annotations.
+     *
+     * @default 'noopener noreferrer nofollow'
+     */
     externalLinkRel?: ExternalLinkRel;
+    /**
+     * Link target for external links rendered in annotations.
+     */
     externalLinkTarget?: ExternalLinkTarget;
+    /**
+     * What PDF should be displayed.
+     *
+     * Its value can be an URL, a file (imported using `import … from …` or from file input form element), or an object with parameters (`url` - URL; `data` - data, preferably Uint8Array; `range` - PDFDataRangeTransport.
+     *
+     * **Warning**: Since equality check (`===`) is used to determine if `file` object has changed, it must be memoized by setting it in component's state, `useMemo` or other similar technique.
+     *
+     * @example 'https://example.com/sample.pdf'
+     * @example importedPdf
+     * @example { url: 'https://example.com/sample.pdf' }
+     */
     file?: File;
+    /**
+     * The path used to prefix the src attributes of annotation SVGs.
+     *
+     * @default ''
+     * @example '/public/images/'
+     */
     imageResourcesPath?: ImageResourcesPath;
+    /**
+     * A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to main `<div>` rendered by `<Document>` component.
+     *
+     * @example (ref) => { this.myDocument = ref; }
+     * @example this.ref
+     * @example ref
+     */
     inputRef?: React.Ref<HTMLDivElement>;
+    /**
+     * What the component should display while loading.
+     *
+     * @default 'Loading PDF…'
+     * @example 'Please wait!'
+     * @example <p>Please wait!</p>
+     * @example {this.renderLoader}
+     */
     loading?: NodeOrRenderer;
+    /**
+     * What the component should display in case of no data.
+     *
+     * @default 'No PDF file specified.'
+     * @example 'Please select a file.'
+     * @example <p>Please select a file.</p>
+     * @example {this.renderNoData}
+     */
     noData?: NodeOrRenderer;
+    /**
+     * Function called when an outline item or a thumbnail has been clicked. Usually, you would like to use this callback to move the user wherever they requested to.
+     *
+     * @example ({ dest, pageIndex, pageNumber }) => alert('Clicked an item from page ' + pageNumber + '!')
+     */
     onItemClick?: OnItemClick;
+    /**
+     * Function called in case of an error while loading a document.
+     *
+     * @example (error) => alert('Error while loading document! ' + error.message)
+     */
     onLoadError?: OnDocumentLoadError;
+    /**
+     * Function called, potentially multiple times, as the loading progresses.
+     *
+     * @example ({ loaded, total }) => alert('Loading a document: ' + (loaded / total) * 100 + '%')
+     */
     onLoadProgress?: OnDocumentLoadProgress;
+    /**
+     * Function called when the document is successfully loaded.
+     *
+     * @example (pdf) => alert('Loaded a file with ' + pdf.numPages + ' pages!')
+     */
     onLoadSuccess?: OnDocumentLoadSuccess;
+    /**
+     * Function called when a password-protected PDF is loaded.
+     *
+     * @example (callback) => callback('s3cr3t_p4ssw0rd')
+     */
     onPassword?: OnPassword;
+    /**
+     * Function called in case of an error while retrieving document source from `file` prop.
+     *
+     * @example (error) => alert('Error while retrieving document source! ' + error.message)
+     */
     onSourceError?: OnSourceError;
+    /**
+     * Function called when document source is successfully retrieved from `file` prop.
+     *
+     * @example () => alert('Document source retrieved!')
+     */
     onSourceSuccess?: OnSourceSuccess;
+    /**
+     * An object in which additional parameters to be passed to PDF.js can be defined. Most notably:
+     * - `cMapUrl`;
+     * - `httpHeaders` - custom request headers, e.g. for authorization);
+     * - `withCredentials` - a boolean to indicate whether or not to include cookies in the request (defaults to `false`)
+     *
+     * For a full list of possible parameters, check [PDF.js documentation on DocumentInitParameters](https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html#~DocumentInitParameters).
+     *
+     * **Note**: Make sure to define options object outside of your React component, and use `useMemo` if you can't.
+     *
+     * @example { cMapUrl: '/cmaps/' }
+     */
     options?: Options;
+    /**
+     * Rendering mode of the document. Can be `"canvas"`, `"custom"`, `"none"` or `"svg"`. If set to `"custom"`, `customRenderer` must also be provided.
+     *
+     * **Warning**: SVG render mode is no longer maintained and may be removed in the future.
+     *
+     * @default 'canvas'
+     * @example 'svg'
+     */
     renderMode?: RenderMode;
+    /**
+     * Rotation of the document in degrees. If provided, will change rotation globally, even for the pages which were given `rotate` prop of their own. `90` = rotated to the right, `180` = upside down, `270` = rotated to the left.
+     *
+     * @example 90
+     */
     rotate?: number | null;
 } & EventProps<DocumentCallback | false | undefined>;
+/**
+ * Loads a document passed using `file` prop.
+ */
 declare const Document: React.ForwardRefExoticComponent<{
     children?: React.ReactNode;
+    /**
+     * Class name(s) that will be added to rendered element along with the default `react-pdf__Document`.
+     *
+     * @example 'custom-class-name-1 custom-class-name-2'
+     * @example ['custom-class-name-1', 'custom-class-name-2']
+     */
     className?: ClassName;
+    /**
+     * What the component should display in case of an error.
+     *
+     * @default 'Failed to load PDF file.'
+     * @example 'An error occurred!'
+     * @example <p>An error occurred!</p>
+     * @example {this.renderError}
+     */
     error?: NodeOrRenderer;
+    /**
+     * Link rel for links rendered in annotations.
+     *
+     * @default 'noopener noreferrer nofollow'
+     */
     externalLinkRel?: string | undefined;
+    /**
+     * Link target for external links rendered in annotations.
+     */
     externalLinkTarget?: ExternalLinkTarget | undefined;
+    /**
+     * What PDF should be displayed.
+     *
+     * Its value can be an URL, a file (imported using `import … from …` or from file input form element), or an object with parameters (`url` - URL; `data` - data, preferably Uint8Array; `range` - PDFDataRangeTransport.
+     *
+     * **Warning**: Since equality check (`===`) is used to determine if `file` object has changed, it must be memoized by setting it in component's state, `useMemo` or other similar technique.
+     *
+     * @example 'https://example.com/sample.pdf'
+     * @example importedPdf
+     * @example { url: 'https://example.com/sample.pdf' }
+     */
     file?: File | undefined;
+    /**
+     * The path used to prefix the src attributes of annotation SVGs.
+     *
+     * @default ''
+     * @example '/public/images/'
+     */
     imageResourcesPath?: string | undefined;
+    /**
+     * A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to main `<div>` rendered by `<Document>` component.
+     *
+     * @example (ref) => { this.myDocument = ref; }
+     * @example this.ref
+     * @example ref
+     */
     inputRef?: React.Ref<HTMLDivElement> | undefined;
+    /**
+     * What the component should display while loading.
+     *
+     * @default 'Loading PDF…'
+     * @example 'Please wait!'
+     * @example <p>Please wait!</p>
+     * @example {this.renderLoader}
+     */
     loading?: NodeOrRenderer;
+    /**
+     * What the component should display in case of no data.
+     *
+     * @default 'No PDF file specified.'
+     * @example 'Please select a file.'
+     * @example <p>Please select a file.</p>
+     * @example {this.renderNoData}
+     */
     noData?: NodeOrRenderer;
+    /**
+     * Function called when an outline item or a thumbnail has been clicked. Usually, you would like to use this callback to move the user wherever they requested to.
+     *
+     * @example ({ dest, pageIndex, pageNumber }) => alert('Clicked an item from page ' + pageNumber + '!')
+     */
     onItemClick?: OnItemClick | undefined;
+    /**
+     * Function called in case of an error while loading a document.
+     *
+     * @example (error) => alert('Error while loading document! ' + error.message)
+     */
     onLoadError?: OnError | undefined;
+    /**
+     * Function called, potentially multiple times, as the loading progresses.
+     *
+     * @example ({ loaded, total }) => alert('Loading a document: ' + (loaded / total) * 100 + '%')
+     */
     onLoadProgress?: OnDocumentLoadProgress | undefined;
+    /**
+     * Function called when the document is successfully loaded.
+     *
+     * @example (pdf) => alert('Loaded a file with ' + pdf.numPages + ' pages!')
+     */
     onLoadSuccess?: OnDocumentLoadSuccess | undefined;
+    /**
+     * Function called when a password-protected PDF is loaded.
+     *
+     * @example (callback) => callback('s3cr3t_p4ssw0rd')
+     */
     onPassword?: OnPassword | undefined;
+    /**
+     * Function called in case of an error while retrieving document source from `file` prop.
+     *
+     * @example (error) => alert('Error while retrieving document source! ' + error.message)
+     */
     onSourceError?: OnError | undefined;
+    /**
+     * Function called when document source is successfully retrieved from `file` prop.
+     *
+     * @example () => alert('Document source retrieved!')
+     */
     onSourceSuccess?: OnSourceSuccess | undefined;
+    /**
+     * An object in which additional parameters to be passed to PDF.js can be defined. Most notably:
+     * - `cMapUrl`;
+     * - `httpHeaders` - custom request headers, e.g. for authorization);
+     * - `withCredentials` - a boolean to indicate whether or not to include cookies in the request (defaults to `false`)
+     *
+     * For a full list of possible parameters, check [PDF.js documentation on DocumentInitParameters](https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html#~DocumentInitParameters).
+     *
+     * **Note**: Make sure to define options object outside of your React component, and use `useMemo` if you can't.
+     *
+     * @example { cMapUrl: '/cmaps/' }
+     */
     options?: {
+        httpHeaders?: Object | null | undefined;
+        withCredentials?: boolean | null | undefined;
+        password?: string | null | undefined;
         length?: number | null | undefined;
+        rangeChunkSize?: number | null | undefined;
         worker?: import("pdfjs-dist").PDFWorker | null | undefined;
-        ownerDocument?: HTMLDocument | null | undefined;
-        password?: string | null | undefined;
         verbosity?: number | null | undefined;
-        isOffscreenCanvasSupported?: boolean | null | undefined;
-        httpHeaders?: Object | null | undefined;
-        withCredentials?: boolean | null | undefined;
-        rangeChunkSize?: number | null | undefined;
         docBaseUrl?: string | null | undefined;
@@ -73,2 +302,3 @@ cMapUrl?: string | null | undefined;
         isEvalSupported?: boolean | null | undefined;
+        isOffscreenCanvasSupported?: boolean | null | undefined;
         canvasMaxAreaInBytes?: number | null | undefined;
@@ -78,2 +308,3 @@ disableFontFace?: boolean | null | undefined;
         enableXfa?: boolean | null | undefined;
+        ownerDocument?: HTMLDocument | null | undefined;
         disableRange?: boolean | null | undefined;
@@ -86,5 +317,18 @@ disableStream?: boolean | null | undefined;
     } | undefined;
+    /**
+     * Rendering mode of the document. Can be `"canvas"`, `"custom"`, `"none"` or `"svg"`. If set to `"custom"`, `customRenderer` must also be provided.
+     *
+     * **Warning**: SVG render mode is no longer maintained and may be removed in the future.
+     *
+     * @default 'canvas'
+     * @example 'svg'
+     */
     renderMode?: RenderMode | undefined;
+    /**
+     * Rotation of the document in degrees. If provided, will change rotation globally, even for the pages which were given `rotate` prop of their own. `90` = rotated to the right, `180` = upside down, `270` = rotated to the left.
+     *
+     * @example 90
+     */
     rotate?: number | null | undefined;
 } & EventProps<false | import("pdfjs-dist/types/src/display/api.js").PDFDocumentProxy | undefined> & React.RefAttributes<unknown>>;
 export default Document;

dist/cjs/Document.js

@@ -50,5 +50,2 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-/**
- * Loads a PDF document. Passes it to all children.
- */
 const react_1 = __importStar(require("react"));
@@ -87,2 +84,5 @@ const prop_types_1 = __importDefault(require("prop-types"));
 };
+/**
+ * Loads a document passed using `file` prop.
+ */
 const Document = (0, react_1.forwardRef)(function Document(_a, ref) {
@@ -89,0 +89,0 @@ var { children, className, error = 'Failed to load PDF file.', externalLinkRel, externalLinkTarget, file, inputRef, imageResourcesPath, loading = 'Loading PDF…', noData = 'No PDF file specified.', onItemClick, onLoadError: onLoadErrorProps, onLoadProgress, onLoadSuccess: onLoadSuccessProps, onPassword = defaultOnPassword, onSourceError: onSourceErrorProps, onSourceSuccess: onSourceSuccessProps, options, renderMode, rotate } = _a, otherProps = __rest(_a, ["children", "className", "error", "externalLinkRel", "externalLinkTarget", "file", "inputRef", "imageResourcesPath", "loading", "noData", "onItemClick", "onLoadError", "onLoadProgress", "onLoadSuccess", "onPassword", "onSourceError", "onSourceSuccess", "options", "renderMode", "rotate"]);

dist/cjs/Outline.d.ts

@@ -7,10 +7,43 @@ import React from 'react';
 export type OutlineProps = {
+    /**
+     * Class name(s) that will be added to rendered element along with the default `react-pdf__Outline`.
+     *
+     * @example 'custom-class-name-1 custom-class-name-2'
+     * @example ['custom-class-name-1', 'custom-class-name-2']
+     */
     className?: ClassName;
+    /**
+     * A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to main `<div>` rendered by `<Outline>` component.
+     *
+     * @example (ref) => { this.myOutline = ref; }
+     * @example this.ref
+     * @example ref
+     */
     inputRef?: React.Ref<HTMLDivElement>;
+    /**
+     * Function called when an outline item has been clicked. Usually, you would like to use this callback to move the user wherever they requested to.
+     *
+     * @example ({ dest, pageIndex, pageNumber }) => alert('Clicked an item from page ' + pageNumber + '!')
+     */
     onItemClick?: (props: OnItemClickArgs) => void;
+    /**
+     * Function called in case of an error while retrieving the outline.
+     *
+     * @example (error) => alert('Error while retrieving the outline! ' + error.message)
+     */
     onLoadError?: (error: Error) => void;
+    /**
+     * Function called when the outline is successfully retrieved.
+     *
+     * @example (outline) => alert('The outline has been successfully retrieved.')
+     */
     onLoadSuccess?: (outline: PDFOutline | null) => void;
     pdf?: PDFDocumentProxy | false;
 } & EventProps<PDFOutline | null | false | undefined>;
+/**
+ * Displays an outline (table of contents).
+ *
+ * Should be placed inside `<Document />`. Alternatively, it can have `pdf` prop passed, which can be obtained from `<Document />`'s `onLoadSuccess` callback function.
+ */
 declare const Outline: React.FC<OutlineProps>;
 export default Outline;

dist/cjs/Outline.js

@@ -54,2 +54,7 @@ "use strict";
 const propTypes_js_1 = require("./shared/propTypes.js");
+/**
+ * Displays an outline (table of contents).
+ *
+ * Should be placed inside `<Document />`. Alternatively, it can have `pdf` prop passed, which can be obtained from `<Document />`'s `onLoadSuccess` callback function.
+ */
 const Outline = function Outline(props) {
@@ -56,0 +61,0 @@ const documentContext = (0, useDocumentContext_js_1.default)();

dist/cjs/Page.d.ts

@@ -8,43 +8,254 @@ import React from 'react';
     _enableRegisterUnregisterPage?: boolean;
+    /**
+     * Canvas background color. Any valid `canvas.fillStyle` can be used. If you set `renderMode` to `"svg"` this prop will be ignored.
+     *
+     * @example 'transparent'
+     */
     canvasBackground?: string;
+    /**
+     * A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to `<canvas>` rendered by `<PageCanvas>` component. If you set `renderMode` to `"svg"` this prop will be ignored.
+     *
+     * @example (ref) => { this.myCanvas = ref; }
+     * @example this.ref
+     * @example ref
+     */
     canvasRef?: React.Ref<HTMLCanvasElement>;
     children?: React.ReactNode;
+    /**
+     * Class name(s) that will be added to rendered element along with the default `react-pdf__Page`.
+     *
+     * @example 'custom-class-name-1 custom-class-name-2'
+     * @example ['custom-class-name-1', 'custom-class-name-2']
+     */
     className?: ClassName;
+    /**
+     * Function that customizes how a page is rendered. You must set `renderMode` to `"custom"` to use this prop.
+     *
+     * @example MyCustomRenderer
+     */
     customRenderer?: CustomRenderer;
+    /**
+     * Function that customizes how a text layer is rendered.
+     *
+     * @example ({ str, itemIndex }) => str.replace(/ipsum/g, value => `<mark>${value}</mark>`)
+     */
     customTextRenderer?: CustomTextRenderer;
+    /**
+     * The ratio between physical pixels and device-independent pixels (DIPs) on the current device.
+     *
+     * @default window.devicePixelRatio
+     * @example 1
+     */
     devicePixelRatio?: number;
+    /**
+     * What the component should display in case of an error.
+     *
+     * @default 'Failed to load the page.'
+     * @example 'An error occurred!'
+     * @example <p>An error occurred!</p>
+     * @example this.renderError
+     */
     error?: NodeOrRenderer;
+    /**
+     * Page height. If neither `height` nor `width` are defined, page will be rendered at the size defined in PDF. If you define `width` and `height` at the same time, `height` will be ignored. If you define `height` and `scale` at the same time, the height will be multiplied by a given factor.
+     *
+     * @example 300
+     */
     height?: number;
+    /**
+     * The path used to prefix the src attributes of annotation SVGs.
+     *
+     * @default ''
+     * @example '/public/images/'
+     */
     imageResourcesPath?: string;
+    /**
+     * A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to main `<div>` rendered by `<Page>` component.
+     *
+     * @example (ref) => { this.myPage = ref; }
+     * @example this.ref
+     * @example ref
+     */
     inputRef?: React.Ref<HTMLDivElement>;
+    /**
+     * What the component should display while loading.
+     *
+     * @default 'Loading page…'
+     * @example 'Please wait!'
+     * @example <p>Please wait!</p>
+     * @example this.renderLoader
+     */
     loading?: NodeOrRenderer;
+    /**
+     *  What the component should display in case of no data.
+     *
+     * @default 'No page specified.'
+     * @example 'Please select a page.'
+     * @example <p>Please select a page.</p>
+     * @example this.renderNoData
+     */
     noData?: NodeOrRenderer;
+    /**
+     * Function called in case of an error while loading annotations.
+     *
+     * @example (error) => alert('Error while loading annotations! ' + error.message)
+     */
     onGetAnnotationsError?: OnGetAnnotationsError;
+    /**
+     * Function called when annotations are successfully loaded.
+     *
+     * @example (annotations) => alert('Now displaying ' + annotations.length + ' annotations!')
+     */
     onGetAnnotationsSuccess?: OnGetAnnotationsSuccess;
+    /**
+     * Function called in case of an error while loading structure tree.
+     *
+     * @example (error) => alert('Error while loading structure tree! ' + error.message)
+     */
     onGetStructTreeError?: OnGetStructTreeError;
+    /**
+     * Function called when structure tree is successfully loaded.
+     *
+     * @example (structTree) => alert(JSON.stringify(structTree))
+     */
     onGetStructTreeSuccess?: OnGetStructTreeSuccess;
+    /**
+     * Function called in case of an error while loading text layer items.
+     *
+     * @example (error) => alert('Error while loading text layer items! ' + error.message)
+     */
     onGetTextError?: OnGetTextError;
+    /**
+     * Function called when text layer items are successfully loaded.
+     *
+     * @example ({ items, styles }) => alert('Now displaying ' + items.length + ' text layer items!')
+     */
     onGetTextSuccess?: OnGetTextSuccess;
+    /**
+     * Function called in case of an error while loading the page.
+     *
+     * @example (error) => alert('Error while loading page! ' + error.message)
+     */
     onLoadError?: OnPageLoadError;
+    /**
+     * Function called when the page is successfully loaded.
+     *
+     * @example (page) => alert('Now displaying a page number ' + page.pageNumber + '!')
+     */
     onLoadSuccess?: OnPageLoadSuccess;
+    /**
+     * Function called in case of an error while rendering the annotation layer.
+     *
+     * @example (error) => alert('Error while rendering annotation layer! ' + error.message)
+     */
     onRenderAnnotationLayerError?: OnRenderAnnotationLayerError;
+    /**
+     * Function called when annotations are successfully rendered on the screen.
+     *
+     * @example () => alert('Rendered the annotation layer!')
+     */
     onRenderAnnotationLayerSuccess?: OnRenderAnnotationLayerSuccess;
+    /**
+     * Function called in case of an error while rendering the page.
+     *
+     * @example (error) => alert('Error while loading page! ' + error.message)
+     */
     onRenderError?: OnRenderError;
+    /**
+     * Function called when the page is successfully rendered on the screen.
+     *
+     * @example () => alert('Rendered the page!')
+     */
     onRenderSuccess?: OnRenderSuccess;
+    /**
+     * Function called in case of an error while rendering the text layer.
+     *
+     * @example (error) => alert('Error while rendering text layer! ' + error.message)
+     */
     onRenderTextLayerError?: OnRenderTextLayerError;
+    /**
+     * Function called when the text layer is successfully rendered on the screen.
+     *
+     * @example () => alert('Rendered the text layer!')
+     */
     onRenderTextLayerSuccess?: OnRenderTextLayerSuccess;
+    /**
+     * Which page from PDF file should be displayed, by page index. Ignored if `pageNumber` prop is provided.
+     *
+     * @default 0
+     * @example 1
+     */
     pageIndex?: number;
+    /**
+     * Which page from PDF file should be displayed, by page number. If provided, `pageIndex` prop will be ignored.
+     *
+     * @default 1
+     * @example 2
+     */
     pageNumber?: number;
+    /**
+     * pdf object obtained from `<Document />`'s `onLoadSuccess` callback function.
+     *
+     * @example pdf
+     */
     pdf?: PDFDocumentProxy | false;
     registerPage?: undefined;
+    /**
+     * Whether annotations (e.g. links) should be rendered.
+     *
+     * @default true
+     * @example false
+     */
     renderAnnotationLayer?: boolean;
+    /**
+     * Whether forms should be rendered. `renderAnnotationLayer` prop must be set to `true`.
+     *
+     * @default false
+     * @example true
+     */
     renderForms?: boolean;
+    /**
+     * Rendering mode of the document. Can be `"canvas"`, `"custom"`, `"none"` or `"svg"`. If set to `"custom"`, `customRenderer` must also be provided.
+     *
+     * **Warning**: SVG render mode is no longer maintained and may be removed in the future.
+     *
+     * @default 'canvas'
+     * @example 'svg'
+     */
     renderMode?: RenderMode;
+    /**
+     * Whether a text layer should be rendered.
+     *
+     * @default true
+     * @example false
+     */
     renderTextLayer?: boolean;
+    /**
+     * Rotation of the page in degrees. `90` = rotated to the right, `180` = upside down, `270` = rotated to the left.
+     *
+     * @default 0
+     * @example 90
+     */
     rotate?: number | null;
+    /**
+     * Page scale.
+     *
+     * @default 1
+     * @example 0.5
+     */
     scale?: number;
     unregisterPage?: undefined;
+    /**
+     * Page width. If neither `height` nor `width` are defined, page will be rendered at the size defined in PDF. If you define `width` and `height` at the same time, `height` will be ignored. If you define `width` and `scale` at the same time, the width will be multiplied by a given factor.
+     *
+     * @example 300
+     */
     width?: number;
 } & EventProps<PageCallback | false | undefined>;
+/**
+ * Displays a page.
+ *
+ * Should be placed inside `<Document />`. Alternatively, it can have `pdf` prop passed, which can be obtained from `<Document />`'s `onLoadSuccess` callback function, however some advanced functions like linking between pages inside a document may not be working correctly.
+ */
 declare const Page: React.FC<PageProps>;
 export default Page;

dist/cjs/Page.js

@@ -60,2 +60,7 @@ "use strict";
 const defaultScale = 1;
+/**
+ * Displays a page.
+ *
+ * Should be placed inside `<Document />`. Alternatively, it can have `pdf` prop passed, which can be obtained from `<Document />`'s `onLoadSuccess` callback function, however some advanced functions like linking between pages inside a document may not be working correctly.
+ */
 const Page = function Page(props) {
@@ -62,0 +67,0 @@ const documentContext = (0, useDocumentContext_js_1.default)();

dist/cjs/Page/AnnotationLayer.js

@@ -128,6 +128,6 @@ "use strict";
         const annotationLayerParameters = {
-            accessibilityManager: null,
-            annotationCanvasMap: null,
+            accessibilityManager: null, // TODO: Implement this
+            annotationCanvasMap: null, // TODO: Implement this
             div: layer,
-            l10n: null,
+            l10n: null, // TODO: Implement this
             page,
@@ -134,0 +134,0 @@ viewport: clonedViewport,

dist/cjs/shared/constants.js

@@ -7,7 +7,7 @@ "use strict";
     // Document level structure types
-    Document: null,
+    Document: null, // There's a "document" role, but it doesn't make sense here.
     DocumentFragment: null,
     // Grouping level structure types
     Part: 'group',
-    Sect: 'group',
+    Sect: 'group', // XXX: There's a "section" role, but it's abstract.
     Div: 'group',
@@ -14,0 +14,0 @@ Aside: 'note',

dist/cjs/shared/propTypes.d.ts

@@ -12,3 +12,3 @@ import PropTypes from 'prop-types';
 export declare const isFile: PropTypes.Requireable<NonNullable<string | ArrayBuffer | PropTypes.InferProps<{
-    data: PropTypes.Validator<NonNullable<NonNullable<string | number[] | ArrayBuffer | null | undefined>>>;
+    data: PropTypes.Validator<NonNullable<NonNullable<string | ArrayBuffer | number[] | null | undefined>>>;
 }> | PropTypes.InferProps<{
@@ -34,4 +34,4 @@ range: PropTypes.Validator<import("pdfjs-dist").PDFDataRangeTransport>;
 }>> | null | undefined>>;
-export declare const isRenderMode: PropTypes.Requireable<"none" | "custom" | "canvas" | "svg">;
+export declare const isRenderMode: PropTypes.Requireable<"canvas" | "custom" | "none" | "svg">;
 export declare const isRotate: PropTypes.Requireable<0 | 90 | 180 | 270>;
 export {};

dist/cjs/shared/structTreeUtils.d.ts

@@ -20,6 +20,6 @@ /// <reference types="react" />
     className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
-    draggable?: (boolean | "false" | "true") | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
     hidden?: boolean | undefined;
@@ -31,3 +31,3 @@ id?: string | undefined;
     slot?: string | undefined;
-    spellCheck?: (boolean | "false" | "true") | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
     style?: import("react").CSSProperties | undefined;
@@ -59,9 +59,9 @@ tabIndex?: number | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "numeric" | "none" | "url" | "text" | "decimal" | "tel" | "email" | undefined;
+    inputMode?: "none" | "url" | "search" | "text" | "tel" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
-    'aria-atomic'?: (boolean | "false" | "true") | undefined;
-    'aria-autocomplete'?: "inline" | "both" | "none" | "list" | undefined;
-    'aria-busy'?: (boolean | "false" | "true") | undefined;
-    'aria-checked'?: boolean | "false" | "mixed" | "true" | undefined;
+    'aria-atomic'?: (boolean | "true" | "false") | undefined;
+    'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
+    'aria-busy'?: (boolean | "true" | "false") | undefined;
+    'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
     'aria-colcount'?: number | undefined;
@@ -71,14 +71,14 @@ 'aria-colindex'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "location" | "time" | "false" | "page" | "true" | "step" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
-    'aria-disabled'?: (boolean | "false" | "true") | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    'aria-disabled'?: (boolean | "true" | "false") | undefined;
+    'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
-    'aria-expanded'?: (boolean | "false" | "true") | undefined;
+    'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined;
-    'aria-grabbed'?: (boolean | "false" | "true") | undefined;
-    'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "false" | "listbox" | "true" | "tree" | undefined;
-    'aria-hidden'?: (boolean | "false" | "true") | undefined;
-    'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
+    'aria-hidden'?: (boolean | "true" | "false") | undefined;
+    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -89,5 +89,5 @@ 'aria-label'?: string | undefined;
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
-    'aria-modal'?: (boolean | "false" | "true") | undefined;
-    'aria-multiline'?: (boolean | "false" | "true") | undefined;
-    'aria-multiselectable'?: (boolean | "false" | "true") | undefined;
+    'aria-modal'?: (boolean | "true" | "false") | undefined;
+    'aria-multiline'?: (boolean | "true" | "false") | undefined;
+    'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
     'aria-orientation'?: "horizontal" | "vertical" | undefined;
@@ -97,6 +97,6 @@ 'aria-owns'?: string | undefined;
     'aria-posinset'?: number | undefined;
-    'aria-pressed'?: boolean | "false" | "mixed" | "true" | undefined;
-    'aria-readonly'?: (boolean | "false" | "true") | undefined;
-    'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    'aria-required'?: (boolean | "false" | "true") | undefined;
+    'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-readonly'?: (boolean | "true" | "false") | undefined;
+    'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    'aria-required'?: (boolean | "true" | "false") | undefined;
     'aria-roledescription'?: string | undefined;
@@ -106,5 +106,5 @@ 'aria-rowcount'?: number | undefined;
     'aria-rowspan'?: number | undefined;
-    'aria-selected'?: (boolean | "false" | "true") | undefined;
+    'aria-selected'?: (boolean | "true" | "false") | undefined;
     'aria-setsize'?: number | undefined;
-    'aria-sort'?: "none" | "other" | "ascending" | "descending" | undefined;
+    'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
     'aria-valuemax'?: number | undefined;
@@ -111,0 +111,0 @@ 'aria-valuemin'?: number | undefined;

dist/cjs/Thumbnail.d.ts

@@ -5,6 +5,22 @@ import React from 'react';
 export type ThumbnailProps = Omit<PageProps, 'className' | 'customTextRenderer' | 'onGetAnnotationsError' | 'onGetAnnotationsSuccess' | 'onGetTextError' | 'onGetTextSuccess' | 'onRenderAnnotationLayerError' | 'onRenderAnnotationLayerSuccess' | 'onRenderTextLayerError' | 'onRenderTextLayerSuccess' | 'renderAnnotationLayer' | 'renderForms' | 'renderTextLayer'> & {
+    /**
+     * Class name(s) that will be added to rendered element along with the default `react-pdf__Thumbnail`.
+     *
+     * @example 'custom-class-name-1 custom-class-name-2'
+     * @example ['custom-class-name-1', 'custom-class-name-2']
+     */
     className?: ClassName;
+    /**
+     * Function called when a thumbnail has been clicked. Usually, you would like to use this callback to move the user wherever they requested to.
+     *
+     * @example ({ dest, pageIndex, pageNumber }) => alert('Clicked an item from page ' + pageNumber + '!')
+     */
     onItemClick?: (args: OnItemClickArgs) => void;
 };
+/**
+ * Displays a thumbnail of a page. Does not render the annotation layer or the text layer. Does not register itself as a link target, so the user will not be scrolled to a Thumbnail component when clicked on an internal link (e.g. in Table of Contents). When clicked, attempts to navigate to the page clicked (similarly to a link in Outline).
+ *
+ * Should be placed inside `<Document />`. Alternatively, it can have `pdf` prop passed, which can be obtained from `<Document />`'s `onLoadSuccess` callback function.
+ */
 declare const Thumbnail: React.FC<ThumbnailProps>;
 export default Thumbnail;

dist/cjs/Thumbnail.js

@@ -24,2 +24,7 @@ "use strict";
 const useDocumentContext_js_1 = __importDefault(require("./shared/hooks/useDocumentContext.js"));
+/**
+ * Displays a thumbnail of a page. Does not render the annotation layer or the text layer. Does not register itself as a link target, so the user will not be scrolled to a Thumbnail component when clicked on an internal link (e.g. in Table of Contents). When clicked, attempts to navigate to the page clicked (similarly to a link in Outline).
+ *
+ * Should be placed inside `<Document />`. Alternatively, it can have `pdf` prop passed, which can be obtained from `<Document />`'s `onLoadSuccess` callback function.
+ */
 const Thumbnail = function Thumbnail(props) {
@@ -26,0 +31,0 @@ const documentContext = (0, useDocumentContext_js_1.default)();

dist/esm/Document.d.ts

@@ -1,4 +0,1 @@
-/**
- * Loads a PDF document. Passes it to all children.
- */
 import React from 'react';
@@ -13,50 +10,282 @@ import type { EventProps } from 'make-event-props';
     children?: React.ReactNode;
+    /**
+     * Class name(s) that will be added to rendered element along with the default `react-pdf__Document`.
+     *
+     * @example 'custom-class-name-1 custom-class-name-2'
+     * @example ['custom-class-name-1', 'custom-class-name-2']
+     */
     className?: ClassName;
+    /**
+     * What the component should display in case of an error.
+     *
+     * @default 'Failed to load PDF file.'
+     * @example 'An error occurred!'
+     * @example <p>An error occurred!</p>
+     * @example {this.renderError}
+     */
     error?: NodeOrRenderer;
+    /**
+     * Link rel for links rendered in annotations.
+     *
+     * @default 'noopener noreferrer nofollow'
+     */
     externalLinkRel?: ExternalLinkRel;
+    /**
+     * Link target for external links rendered in annotations.
+     */
     externalLinkTarget?: ExternalLinkTarget;
+    /**
+     * What PDF should be displayed.
+     *
+     * Its value can be an URL, a file (imported using `import … from …` or from file input form element), or an object with parameters (`url` - URL; `data` - data, preferably Uint8Array; `range` - PDFDataRangeTransport.
+     *
+     * **Warning**: Since equality check (`===`) is used to determine if `file` object has changed, it must be memoized by setting it in component's state, `useMemo` or other similar technique.
+     *
+     * @example 'https://example.com/sample.pdf'
+     * @example importedPdf
+     * @example { url: 'https://example.com/sample.pdf' }
+     */
     file?: File;
+    /**
+     * The path used to prefix the src attributes of annotation SVGs.
+     *
+     * @default ''
+     * @example '/public/images/'
+     */
     imageResourcesPath?: ImageResourcesPath;
+    /**
+     * A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to main `<div>` rendered by `<Document>` component.
+     *
+     * @example (ref) => { this.myDocument = ref; }
+     * @example this.ref
+     * @example ref
+     */
     inputRef?: React.Ref<HTMLDivElement>;
+    /**
+     * What the component should display while loading.
+     *
+     * @default 'Loading PDF…'
+     * @example 'Please wait!'
+     * @example <p>Please wait!</p>
+     * @example {this.renderLoader}
+     */
     loading?: NodeOrRenderer;
+    /**
+     * What the component should display in case of no data.
+     *
+     * @default 'No PDF file specified.'
+     * @example 'Please select a file.'
+     * @example <p>Please select a file.</p>
+     * @example {this.renderNoData}
+     */
     noData?: NodeOrRenderer;
+    /**
+     * Function called when an outline item or a thumbnail has been clicked. Usually, you would like to use this callback to move the user wherever they requested to.
+     *
+     * @example ({ dest, pageIndex, pageNumber }) => alert('Clicked an item from page ' + pageNumber + '!')
+     */
     onItemClick?: OnItemClick;
+    /**
+     * Function called in case of an error while loading a document.
+     *
+     * @example (error) => alert('Error while loading document! ' + error.message)
+     */
     onLoadError?: OnDocumentLoadError;
+    /**
+     * Function called, potentially multiple times, as the loading progresses.
+     *
+     * @example ({ loaded, total }) => alert('Loading a document: ' + (loaded / total) * 100 + '%')
+     */
     onLoadProgress?: OnDocumentLoadProgress;
+    /**
+     * Function called when the document is successfully loaded.
+     *
+     * @example (pdf) => alert('Loaded a file with ' + pdf.numPages + ' pages!')
+     */
     onLoadSuccess?: OnDocumentLoadSuccess;
+    /**
+     * Function called when a password-protected PDF is loaded.
+     *
+     * @example (callback) => callback('s3cr3t_p4ssw0rd')
+     */
     onPassword?: OnPassword;
+    /**
+     * Function called in case of an error while retrieving document source from `file` prop.
+     *
+     * @example (error) => alert('Error while retrieving document source! ' + error.message)
+     */
     onSourceError?: OnSourceError;
+    /**
+     * Function called when document source is successfully retrieved from `file` prop.
+     *
+     * @example () => alert('Document source retrieved!')
+     */
     onSourceSuccess?: OnSourceSuccess;
+    /**
+     * An object in which additional parameters to be passed to PDF.js can be defined. Most notably:
+     * - `cMapUrl`;
+     * - `httpHeaders` - custom request headers, e.g. for authorization);
+     * - `withCredentials` - a boolean to indicate whether or not to include cookies in the request (defaults to `false`)
+     *
+     * For a full list of possible parameters, check [PDF.js documentation on DocumentInitParameters](https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html#~DocumentInitParameters).
+     *
+     * **Note**: Make sure to define options object outside of your React component, and use `useMemo` if you can't.
+     *
+     * @example { cMapUrl: '/cmaps/' }
+     */
     options?: Options;
+    /**
+     * Rendering mode of the document. Can be `"canvas"`, `"custom"`, `"none"` or `"svg"`. If set to `"custom"`, `customRenderer` must also be provided.
+     *
+     * **Warning**: SVG render mode is no longer maintained and may be removed in the future.
+     *
+     * @default 'canvas'
+     * @example 'svg'
+     */
     renderMode?: RenderMode;
+    /**
+     * Rotation of the document in degrees. If provided, will change rotation globally, even for the pages which were given `rotate` prop of their own. `90` = rotated to the right, `180` = upside down, `270` = rotated to the left.
+     *
+     * @example 90
+     */
     rotate?: number | null;
 } & EventProps<DocumentCallback | false | undefined>;
+/**
+ * Loads a document passed using `file` prop.
+ */
 declare const Document: React.ForwardRefExoticComponent<{
     children?: React.ReactNode;
+    /**
+     * Class name(s) that will be added to rendered element along with the default `react-pdf__Document`.
+     *
+     * @example 'custom-class-name-1 custom-class-name-2'
+     * @example ['custom-class-name-1', 'custom-class-name-2']
+     */
     className?: ClassName;
+    /**
+     * What the component should display in case of an error.
+     *
+     * @default 'Failed to load PDF file.'
+     * @example 'An error occurred!'
+     * @example <p>An error occurred!</p>
+     * @example {this.renderError}
+     */
     error?: NodeOrRenderer;
+    /**
+     * Link rel for links rendered in annotations.
+     *
+     * @default 'noopener noreferrer nofollow'
+     */
     externalLinkRel?: string | undefined;
+    /**
+     * Link target for external links rendered in annotations.
+     */
     externalLinkTarget?: ExternalLinkTarget | undefined;
+    /**
+     * What PDF should be displayed.
+     *
+     * Its value can be an URL, a file (imported using `import … from …` or from file input form element), or an object with parameters (`url` - URL; `data` - data, preferably Uint8Array; `range` - PDFDataRangeTransport.
+     *
+     * **Warning**: Since equality check (`===`) is used to determine if `file` object has changed, it must be memoized by setting it in component's state, `useMemo` or other similar technique.
+     *
+     * @example 'https://example.com/sample.pdf'
+     * @example importedPdf
+     * @example { url: 'https://example.com/sample.pdf' }
+     */
     file?: File | undefined;
+    /**
+     * The path used to prefix the src attributes of annotation SVGs.
+     *
+     * @default ''
+     * @example '/public/images/'
+     */
     imageResourcesPath?: string | undefined;
+    /**
+     * A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to main `<div>` rendered by `<Document>` component.
+     *
+     * @example (ref) => { this.myDocument = ref; }
+     * @example this.ref
+     * @example ref
+     */
     inputRef?: React.Ref<HTMLDivElement> | undefined;
+    /**
+     * What the component should display while loading.
+     *
+     * @default 'Loading PDF…'
+     * @example 'Please wait!'
+     * @example <p>Please wait!</p>
+     * @example {this.renderLoader}
+     */
     loading?: NodeOrRenderer;
+    /**
+     * What the component should display in case of no data.
+     *
+     * @default 'No PDF file specified.'
+     * @example 'Please select a file.'
+     * @example <p>Please select a file.</p>
+     * @example {this.renderNoData}
+     */
     noData?: NodeOrRenderer;
+    /**
+     * Function called when an outline item or a thumbnail has been clicked. Usually, you would like to use this callback to move the user wherever they requested to.
+     *
+     * @example ({ dest, pageIndex, pageNumber }) => alert('Clicked an item from page ' + pageNumber + '!')
+     */
     onItemClick?: OnItemClick | undefined;
+    /**
+     * Function called in case of an error while loading a document.
+     *
+     * @example (error) => alert('Error while loading document! ' + error.message)
+     */
     onLoadError?: OnError | undefined;
+    /**
+     * Function called, potentially multiple times, as the loading progresses.
+     *
+     * @example ({ loaded, total }) => alert('Loading a document: ' + (loaded / total) * 100 + '%')
+     */
     onLoadProgress?: OnDocumentLoadProgress | undefined;
+    /**
+     * Function called when the document is successfully loaded.
+     *
+     * @example (pdf) => alert('Loaded a file with ' + pdf.numPages + ' pages!')
+     */
     onLoadSuccess?: OnDocumentLoadSuccess | undefined;
+    /**
+     * Function called when a password-protected PDF is loaded.
+     *
+     * @example (callback) => callback('s3cr3t_p4ssw0rd')
+     */
     onPassword?: OnPassword | undefined;
+    /**
+     * Function called in case of an error while retrieving document source from `file` prop.
+     *
+     * @example (error) => alert('Error while retrieving document source! ' + error.message)
+     */
     onSourceError?: OnError | undefined;
+    /**
+     * Function called when document source is successfully retrieved from `file` prop.
+     *
+     * @example () => alert('Document source retrieved!')
+     */
     onSourceSuccess?: OnSourceSuccess | undefined;
+    /**
+     * An object in which additional parameters to be passed to PDF.js can be defined. Most notably:
+     * - `cMapUrl`;
+     * - `httpHeaders` - custom request headers, e.g. for authorization);
+     * - `withCredentials` - a boolean to indicate whether or not to include cookies in the request (defaults to `false`)
+     *
+     * For a full list of possible parameters, check [PDF.js documentation on DocumentInitParameters](https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html#~DocumentInitParameters).
+     *
+     * **Note**: Make sure to define options object outside of your React component, and use `useMemo` if you can't.
+     *
+     * @example { cMapUrl: '/cmaps/' }
+     */
     options?: {
+        httpHeaders?: Object | null | undefined;
+        withCredentials?: boolean | null | undefined;
+        password?: string | null | undefined;
         length?: number | null | undefined;
+        rangeChunkSize?: number | null | undefined;
         worker?: import("pdfjs-dist").PDFWorker | null | undefined;
-        ownerDocument?: HTMLDocument | null | undefined;
-        password?: string | null | undefined;
         verbosity?: number | null | undefined;
-        isOffscreenCanvasSupported?: boolean | null | undefined;
-        httpHeaders?: Object | null | undefined;
-        withCredentials?: boolean | null | undefined;
-        rangeChunkSize?: number | null | undefined;
         docBaseUrl?: string | null | undefined;
@@ -73,2 +302,3 @@ cMapUrl?: string | null | undefined;
         isEvalSupported?: boolean | null | undefined;
+        isOffscreenCanvasSupported?: boolean | null | undefined;
         canvasMaxAreaInBytes?: number | null | undefined;
@@ -78,2 +308,3 @@ disableFontFace?: boolean | null | undefined;
         enableXfa?: boolean | null | undefined;
+        ownerDocument?: HTMLDocument | null | undefined;
         disableRange?: boolean | null | undefined;
@@ -86,5 +317,18 @@ disableStream?: boolean | null | undefined;
     } | undefined;
+    /**
+     * Rendering mode of the document. Can be `"canvas"`, `"custom"`, `"none"` or `"svg"`. If set to `"custom"`, `customRenderer` must also be provided.
+     *
+     * **Warning**: SVG render mode is no longer maintained and may be removed in the future.
+     *
+     * @default 'canvas'
+     * @example 'svg'
+     */
     renderMode?: RenderMode | undefined;
+    /**
+     * Rotation of the document in degrees. If provided, will change rotation globally, even for the pages which were given `rotate` prop of their own. `90` = rotated to the right, `180` = upside down, `270` = rotated to the left.
+     *
+     * @example 90
+     */
     rotate?: number | null | undefined;
 } & EventProps<false | import("pdfjs-dist/types/src/display/api.js").PDFDocumentProxy | undefined> & React.RefAttributes<unknown>>;
 export default Document;

dist/esm/Document.js

@@ -22,5 +22,2 @@ 'use client';
 };
-/**
- * Loads a PDF document. Passes it to all children.
- */
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, } from 'react';
@@ -59,2 +56,5 @@ import PropTypes from 'prop-types';
 };
+/**
+ * Loads a document passed using `file` prop.
+ */
 const Document = forwardRef(function Document(_a, ref) {
@@ -61,0 +61,0 @@ var { children, className, error = 'Failed to load PDF file.', externalLinkRel, externalLinkTarget, file, inputRef, imageResourcesPath, loading = 'Loading PDF…', noData = 'No PDF file specified.', onItemClick, onLoadError: onLoadErrorProps, onLoadProgress, onLoadSuccess: onLoadSuccessProps, onPassword = defaultOnPassword, onSourceError: onSourceErrorProps, onSourceSuccess: onSourceSuccessProps, options, renderMode, rotate } = _a, otherProps = __rest(_a, ["children", "className", "error", "externalLinkRel", "externalLinkTarget", "file", "inputRef", "imageResourcesPath", "loading", "noData", "onItemClick", "onLoadError", "onLoadProgress", "onLoadSuccess", "onPassword", "onSourceError", "onSourceSuccess", "options", "renderMode", "rotate"]);

dist/esm/Outline.d.ts

@@ -7,10 +7,43 @@ import React from 'react';
 export type OutlineProps = {
+    /**
+     * Class name(s) that will be added to rendered element along with the default `react-pdf__Outline`.
+     *
+     * @example 'custom-class-name-1 custom-class-name-2'
+     * @example ['custom-class-name-1', 'custom-class-name-2']
+     */
     className?: ClassName;
+    /**
+     * A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to main `<div>` rendered by `<Outline>` component.
+     *
+     * @example (ref) => { this.myOutline = ref; }
+     * @example this.ref
+     * @example ref
+     */
     inputRef?: React.Ref<HTMLDivElement>;
+    /**
+     * Function called when an outline item has been clicked. Usually, you would like to use this callback to move the user wherever they requested to.
+     *
+     * @example ({ dest, pageIndex, pageNumber }) => alert('Clicked an item from page ' + pageNumber + '!')
+     */
     onItemClick?: (props: OnItemClickArgs) => void;
+    /**
+     * Function called in case of an error while retrieving the outline.
+     *
+     * @example (error) => alert('Error while retrieving the outline! ' + error.message)
+     */
     onLoadError?: (error: Error) => void;
+    /**
+     * Function called when the outline is successfully retrieved.
+     *
+     * @example (outline) => alert('The outline has been successfully retrieved.')
+     */
     onLoadSuccess?: (outline: PDFOutline | null) => void;
     pdf?: PDFDocumentProxy | false;
 } & EventProps<PDFOutline | null | false | undefined>;
+/**
+ * Displays an outline (table of contents).
+ *
+ * Should be placed inside `<Document />`. Alternatively, it can have `pdf` prop passed, which can be obtained from `<Document />`'s `onLoadSuccess` callback function.
+ */
 declare const Outline: React.FC<OutlineProps>;
 export default Outline;

dist/esm/Outline.js

@@ -26,2 +26,7 @@ 'use client';
 import { eventProps, isClassName, isPdf, isRef } from './shared/propTypes.js';
+/**
+ * Displays an outline (table of contents).
+ *
+ * Should be placed inside `<Document />`. Alternatively, it can have `pdf` prop passed, which can be obtained from `<Document />`'s `onLoadSuccess` callback function.
+ */
 const Outline = function Outline(props) {
@@ -28,0 +33,0 @@ const documentContext = useDocumentContext();

dist/esm/Page.d.ts

@@ -8,43 +8,254 @@ import React from 'react';
     _enableRegisterUnregisterPage?: boolean;
+    /**
+     * Canvas background color. Any valid `canvas.fillStyle` can be used. If you set `renderMode` to `"svg"` this prop will be ignored.
+     *
+     * @example 'transparent'
+     */
     canvasBackground?: string;
+    /**
+     * A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to `<canvas>` rendered by `<PageCanvas>` component. If you set `renderMode` to `"svg"` this prop will be ignored.
+     *
+     * @example (ref) => { this.myCanvas = ref; }
+     * @example this.ref
+     * @example ref
+     */
     canvasRef?: React.Ref<HTMLCanvasElement>;
     children?: React.ReactNode;
+    /**
+     * Class name(s) that will be added to rendered element along with the default `react-pdf__Page`.
+     *
+     * @example 'custom-class-name-1 custom-class-name-2'
+     * @example ['custom-class-name-1', 'custom-class-name-2']
+     */
     className?: ClassName;
+    /**
+     * Function that customizes how a page is rendered. You must set `renderMode` to `"custom"` to use this prop.
+     *
+     * @example MyCustomRenderer
+     */
     customRenderer?: CustomRenderer;
+    /**
+     * Function that customizes how a text layer is rendered.
+     *
+     * @example ({ str, itemIndex }) => str.replace(/ipsum/g, value => `<mark>${value}</mark>`)
+     */
     customTextRenderer?: CustomTextRenderer;
+    /**
+     * The ratio between physical pixels and device-independent pixels (DIPs) on the current device.
+     *
+     * @default window.devicePixelRatio
+     * @example 1
+     */
     devicePixelRatio?: number;
+    /**
+     * What the component should display in case of an error.
+     *
+     * @default 'Failed to load the page.'
+     * @example 'An error occurred!'
+     * @example <p>An error occurred!</p>
+     * @example this.renderError
+     */
     error?: NodeOrRenderer;
+    /**
+     * Page height. If neither `height` nor `width` are defined, page will be rendered at the size defined in PDF. If you define `width` and `height` at the same time, `height` will be ignored. If you define `height` and `scale` at the same time, the height will be multiplied by a given factor.
+     *
+     * @example 300
+     */
     height?: number;
+    /**
+     * The path used to prefix the src attributes of annotation SVGs.
+     *
+     * @default ''
+     * @example '/public/images/'
+     */
     imageResourcesPath?: string;
+    /**
+     * A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to main `<div>` rendered by `<Page>` component.
+     *
+     * @example (ref) => { this.myPage = ref; }
+     * @example this.ref
+     * @example ref
+     */
     inputRef?: React.Ref<HTMLDivElement>;
+    /**
+     * What the component should display while loading.
+     *
+     * @default 'Loading page…'
+     * @example 'Please wait!'
+     * @example <p>Please wait!</p>
+     * @example this.renderLoader
+     */
     loading?: NodeOrRenderer;
+    /**
+     *  What the component should display in case of no data.
+     *
+     * @default 'No page specified.'
+     * @example 'Please select a page.'
+     * @example <p>Please select a page.</p>
+     * @example this.renderNoData
+     */
     noData?: NodeOrRenderer;
+    /**
+     * Function called in case of an error while loading annotations.
+     *
+     * @example (error) => alert('Error while loading annotations! ' + error.message)
+     */
     onGetAnnotationsError?: OnGetAnnotationsError;
+    /**
+     * Function called when annotations are successfully loaded.
+     *
+     * @example (annotations) => alert('Now displaying ' + annotations.length + ' annotations!')
+     */
     onGetAnnotationsSuccess?: OnGetAnnotationsSuccess;
+    /**
+     * Function called in case of an error while loading structure tree.
+     *
+     * @example (error) => alert('Error while loading structure tree! ' + error.message)
+     */
     onGetStructTreeError?: OnGetStructTreeError;
+    /**
+     * Function called when structure tree is successfully loaded.
+     *
+     * @example (structTree) => alert(JSON.stringify(structTree))
+     */
     onGetStructTreeSuccess?: OnGetStructTreeSuccess;
+    /**
+     * Function called in case of an error while loading text layer items.
+     *
+     * @example (error) => alert('Error while loading text layer items! ' + error.message)
+     */
     onGetTextError?: OnGetTextError;
+    /**
+     * Function called when text layer items are successfully loaded.
+     *
+     * @example ({ items, styles }) => alert('Now displaying ' + items.length + ' text layer items!')
+     */
     onGetTextSuccess?: OnGetTextSuccess;
+    /**
+     * Function called in case of an error while loading the page.
+     *
+     * @example (error) => alert('Error while loading page! ' + error.message)
+     */
     onLoadError?: OnPageLoadError;
+    /**
+     * Function called when the page is successfully loaded.
+     *
+     * @example (page) => alert('Now displaying a page number ' + page.pageNumber + '!')
+     */
     onLoadSuccess?: OnPageLoadSuccess;
+    /**
+     * Function called in case of an error while rendering the annotation layer.
+     *
+     * @example (error) => alert('Error while rendering annotation layer! ' + error.message)
+     */
     onRenderAnnotationLayerError?: OnRenderAnnotationLayerError;
+    /**
+     * Function called when annotations are successfully rendered on the screen.
+     *
+     * @example () => alert('Rendered the annotation layer!')
+     */
     onRenderAnnotationLayerSuccess?: OnRenderAnnotationLayerSuccess;
+    /**
+     * Function called in case of an error while rendering the page.
+     *
+     * @example (error) => alert('Error while loading page! ' + error.message)
+     */
     onRenderError?: OnRenderError;
+    /**
+     * Function called when the page is successfully rendered on the screen.
+     *
+     * @example () => alert('Rendered the page!')
+     */
     onRenderSuccess?: OnRenderSuccess;
+    /**
+     * Function called in case of an error while rendering the text layer.
+     *
+     * @example (error) => alert('Error while rendering text layer! ' + error.message)
+     */
     onRenderTextLayerError?: OnRenderTextLayerError;
+    /**
+     * Function called when the text layer is successfully rendered on the screen.
+     *
+     * @example () => alert('Rendered the text layer!')
+     */
     onRenderTextLayerSuccess?: OnRenderTextLayerSuccess;
+    /**
+     * Which page from PDF file should be displayed, by page index. Ignored if `pageNumber` prop is provided.
+     *
+     * @default 0
+     * @example 1
+     */
     pageIndex?: number;
+    /**
+     * Which page from PDF file should be displayed, by page number. If provided, `pageIndex` prop will be ignored.
+     *
+     * @default 1
+     * @example 2
+     */
     pageNumber?: number;
+    /**
+     * pdf object obtained from `<Document />`'s `onLoadSuccess` callback function.
+     *
+     * @example pdf
+     */
     pdf?: PDFDocumentProxy | false;
     registerPage?: undefined;
+    /**
+     * Whether annotations (e.g. links) should be rendered.
+     *
+     * @default true
+     * @example false
+     */
     renderAnnotationLayer?: boolean;
+    /**
+     * Whether forms should be rendered. `renderAnnotationLayer` prop must be set to `true`.
+     *
+     * @default false
+     * @example true
+     */
     renderForms?: boolean;
+    /**
+     * Rendering mode of the document. Can be `"canvas"`, `"custom"`, `"none"` or `"svg"`. If set to `"custom"`, `customRenderer` must also be provided.
+     *
+     * **Warning**: SVG render mode is no longer maintained and may be removed in the future.
+     *
+     * @default 'canvas'
+     * @example 'svg'
+     */
     renderMode?: RenderMode;
+    /**
+     * Whether a text layer should be rendered.
+     *
+     * @default true
+     * @example false
+     */
     renderTextLayer?: boolean;
+    /**
+     * Rotation of the page in degrees. `90` = rotated to the right, `180` = upside down, `270` = rotated to the left.
+     *
+     * @default 0
+     * @example 90
+     */
     rotate?: number | null;
+    /**
+     * Page scale.
+     *
+     * @default 1
+     * @example 0.5
+     */
     scale?: number;
     unregisterPage?: undefined;
+    /**
+     * Page width. If neither `height` nor `width` are defined, page will be rendered at the size defined in PDF. If you define `width` and `height` at the same time, `height` will be ignored. If you define `width` and `scale` at the same time, the width will be multiplied by a given factor.
+     *
+     * @example 300
+     */
     width?: number;
 } & EventProps<PageCallback | false | undefined>;
+/**
+ * Displays a page.
+ *
+ * Should be placed inside `<Document />`. Alternatively, it can have `pdf` prop passed, which can be obtained from `<Document />`'s `onLoadSuccess` callback function, however some advanced functions like linking between pages inside a document may not be working correctly.
+ */
 declare const Page: React.FC<PageProps>;
 export default Page;

dist/esm/Page.js

@@ -32,2 +32,7 @@ 'use client';
 const defaultScale = 1;
+/**
+ * Displays a page.
+ *
+ * Should be placed inside `<Document />`. Alternatively, it can have `pdf` prop passed, which can be obtained from `<Document />`'s `onLoadSuccess` callback function, however some advanced functions like linking between pages inside a document may not be working correctly.
+ */
 const Page = function Page(props) {
@@ -34,0 +39,0 @@ const documentContext = useDocumentContext();

dist/esm/Page/AnnotationLayer.js

@@ -100,6 +100,6 @@ 'use client';
         const annotationLayerParameters = {
-            accessibilityManager: null,
-            annotationCanvasMap: null,
+            accessibilityManager: null, // TODO: Implement this
+            annotationCanvasMap: null, // TODO: Implement this
             div: layer,
-            l10n: null,
+            l10n: null, // TODO: Implement this
             page,
@@ -106,0 +106,0 @@ viewport: clonedViewport,

dist/esm/shared/constants.js

 // From pdfjs-dist/lib/web/struct_tree_layer_builder.js
 export const PDF_ROLE_TO_HTML_ROLE = {
     // Document level structure types
-    Document: null,
+    Document: null, // There's a "document" role, but it doesn't make sense here.
     DocumentFragment: null,
     // Grouping level structure types
     Part: 'group',
-    Sect: 'group',
+    Sect: 'group', // XXX: There's a "section" role, but it's abstract.
     Div: 'group',
@@ -10,0 +10,0 @@ Aside: 'note',

dist/esm/shared/propTypes.d.ts

@@ -12,3 +12,3 @@ import PropTypes from 'prop-types';
 export declare const isFile: PropTypes.Requireable<NonNullable<string | ArrayBuffer | PropTypes.InferProps<{
-    data: PropTypes.Validator<NonNullable<NonNullable<string | number[] | ArrayBuffer | null | undefined>>>;
+    data: PropTypes.Validator<NonNullable<NonNullable<string | ArrayBuffer | number[] | null | undefined>>>;
 }> | PropTypes.InferProps<{
@@ -34,4 +34,4 @@ range: PropTypes.Validator<import("pdfjs-dist").PDFDataRangeTransport>;
 }>> | null | undefined>>;
-export declare const isRenderMode: PropTypes.Requireable<"none" | "custom" | "canvas" | "svg">;
+export declare const isRenderMode: PropTypes.Requireable<"canvas" | "custom" | "none" | "svg">;
 export declare const isRotate: PropTypes.Requireable<0 | 90 | 180 | 270>;
 export {};

dist/esm/shared/structTreeUtils.d.ts

@@ -20,6 +20,6 @@ /// <reference types="react" />
     className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
-    draggable?: (boolean | "false" | "true") | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
     hidden?: boolean | undefined;
@@ -31,3 +31,3 @@ id?: string | undefined;
     slot?: string | undefined;
-    spellCheck?: (boolean | "false" | "true") | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
     style?: import("react").CSSProperties | undefined;
@@ -59,9 +59,9 @@ tabIndex?: number | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "numeric" | "none" | "url" | "text" | "decimal" | "tel" | "email" | undefined;
+    inputMode?: "none" | "url" | "search" | "text" | "tel" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
-    'aria-atomic'?: (boolean | "false" | "true") | undefined;
-    'aria-autocomplete'?: "inline" | "both" | "none" | "list" | undefined;
-    'aria-busy'?: (boolean | "false" | "true") | undefined;
-    'aria-checked'?: boolean | "false" | "mixed" | "true" | undefined;
+    'aria-atomic'?: (boolean | "true" | "false") | undefined;
+    'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
+    'aria-busy'?: (boolean | "true" | "false") | undefined;
+    'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
     'aria-colcount'?: number | undefined;
@@ -71,14 +71,14 @@ 'aria-colindex'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "location" | "time" | "false" | "page" | "true" | "step" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
-    'aria-disabled'?: (boolean | "false" | "true") | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    'aria-disabled'?: (boolean | "true" | "false") | undefined;
+    'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
-    'aria-expanded'?: (boolean | "false" | "true") | undefined;
+    'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined;
-    'aria-grabbed'?: (boolean | "false" | "true") | undefined;
-    'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "false" | "listbox" | "true" | "tree" | undefined;
-    'aria-hidden'?: (boolean | "false" | "true") | undefined;
-    'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
+    'aria-hidden'?: (boolean | "true" | "false") | undefined;
+    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -89,5 +89,5 @@ 'aria-label'?: string | undefined;
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
-    'aria-modal'?: (boolean | "false" | "true") | undefined;
-    'aria-multiline'?: (boolean | "false" | "true") | undefined;
-    'aria-multiselectable'?: (boolean | "false" | "true") | undefined;
+    'aria-modal'?: (boolean | "true" | "false") | undefined;
+    'aria-multiline'?: (boolean | "true" | "false") | undefined;
+    'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
     'aria-orientation'?: "horizontal" | "vertical" | undefined;
@@ -97,6 +97,6 @@ 'aria-owns'?: string | undefined;
     'aria-posinset'?: number | undefined;
-    'aria-pressed'?: boolean | "false" | "mixed" | "true" | undefined;
-    'aria-readonly'?: (boolean | "false" | "true") | undefined;
-    'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    'aria-required'?: (boolean | "false" | "true") | undefined;
+    'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-readonly'?: (boolean | "true" | "false") | undefined;
+    'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    'aria-required'?: (boolean | "true" | "false") | undefined;
     'aria-roledescription'?: string | undefined;
@@ -106,5 +106,5 @@ 'aria-rowcount'?: number | undefined;
     'aria-rowspan'?: number | undefined;
-    'aria-selected'?: (boolean | "false" | "true") | undefined;
+    'aria-selected'?: (boolean | "true" | "false") | undefined;
     'aria-setsize'?: number | undefined;
-    'aria-sort'?: "none" | "other" | "ascending" | "descending" | undefined;
+    'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
     'aria-valuemax'?: number | undefined;
@@ -111,0 +111,0 @@ 'aria-valuemin'?: number | undefined;

dist/esm/Thumbnail.d.ts

@@ -5,6 +5,22 @@ import React from 'react';
 export type ThumbnailProps = Omit<PageProps, 'className' | 'customTextRenderer' | 'onGetAnnotationsError' | 'onGetAnnotationsSuccess' | 'onGetTextError' | 'onGetTextSuccess' | 'onRenderAnnotationLayerError' | 'onRenderAnnotationLayerSuccess' | 'onRenderTextLayerError' | 'onRenderTextLayerSuccess' | 'renderAnnotationLayer' | 'renderForms' | 'renderTextLayer'> & {
+    /**
+     * Class name(s) that will be added to rendered element along with the default `react-pdf__Thumbnail`.
+     *
+     * @example 'custom-class-name-1 custom-class-name-2'
+     * @example ['custom-class-name-1', 'custom-class-name-2']
+     */
     className?: ClassName;
+    /**
+     * Function called when a thumbnail has been clicked. Usually, you would like to use this callback to move the user wherever they requested to.
+     *
+     * @example ({ dest, pageIndex, pageNumber }) => alert('Clicked an item from page ' + pageNumber + '!')
+     */
     onItemClick?: (args: OnItemClickArgs) => void;
 };
+/**
+ * Displays a thumbnail of a page. Does not render the annotation layer or the text layer. Does not register itself as a link target, so the user will not be scrolled to a Thumbnail component when clicked on an internal link (e.g. in Table of Contents). When clicked, attempts to navigate to the page clicked (similarly to a link in Outline).
+ *
+ * Should be placed inside `<Document />`. Alternatively, it can have `pdf` prop passed, which can be obtained from `<Document />`'s `onLoadSuccess` callback function.
+ */
 declare const Thumbnail: React.FC<ThumbnailProps>;
 export default Thumbnail;

dist/esm/Thumbnail.js

@@ -19,2 +19,7 @@ 'use client';
 import useDocumentContext from './shared/hooks/useDocumentContext.js';
+/**
+ * Displays a thumbnail of a page. Does not render the annotation layer or the text layer. Does not register itself as a link target, so the user will not be scrolled to a Thumbnail component when clicked on an internal link (e.g. in Table of Contents). When clicked, attempts to navigate to the page clicked (similarly to a link in Outline).
+ *
+ * Should be placed inside `<Document />`. Alternatively, it can have `pdf` prop passed, which can be obtained from `<Document />`'s `onLoadSuccess` callback function.
+ */
 const Thumbnail = function Thumbnail(props) {
@@ -21,0 +26,0 @@ const documentContext = useDocumentContext();

package.json

 {
   "name": "react-pdf",
-  "version": "7.5.1",
+  "version": "7.6.0",
   "description": "Display PDFs in your React app as easily as if they were images.",
@@ -43,3 +43,3 @@ "type": "module",
     "test": "yarn lint && yarn tsc && yarn prettier && yarn unit",
-    "tsc": "tsc --noEmit",
+    "tsc": "tsc",
     "unit": "vitest",
@@ -70,3 +70,3 @@ "watch": "yarn build-js-esm --watch & yarn build-js-cjs --watch & nodemon --watch src --ext css --exec \"yarn copy-styles\""
     "@testing-library/dom": "^9.0.0",
-    "@testing-library/jest-dom": "^5.15.0",
+    "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
@@ -84,4 +84,4 @@ "@types/node": "*",
     "rimraf": "^3.0.0",
-    "typescript": "^5.0.0",
-    "vitest": "^0.34.0",
+    "typescript": "^5.3.2",
+    "vitest": "^1.0.2",
     "vitest-canvas-mock": "^0.2.2"
@@ -88,0 +88,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

643363

increased by9.9%

Lines of code

14376

increased by11%

Number of lines in readme file

605

increased by0.5%

No dependency changes