React PDF

https://github.com/wojtekmaj/react-pdf
Admin
React-PDF is a library for displaying PDFs in React applications, allowing users to render PDF...
Tokens:31,464
Snippets:266
Trust Score:10
License:MIT
Update:1 week ago
Show doc for...
Tokens:
Raw
### Display all pages with react-pdf

Source: https://github.com/wojtekmaj/react-pdf/wiki/Recipes

Renders all pages of a PDF by tracking the total number of pages with onLoadSuccess and mapping over them. Note that this approach may cause performance issues with large documents. Requires the same setup as the single-page example.

```jsx
import { Suspense, useState } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { Document, Page } from 'react-pdf';

import samplePDF from './test.pdf';

export default function Test() {
  const [numPages, setNumPages] = useState(null);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

  return (
    <ErrorBoundary fallback={<p>Could not load PDF.</p>}>
      <Suspense fallback={<p>Loading PDF…</p>}>
        <Document
          file={samplePDF}
          onLoadSuccess={onDocumentLoadSuccess}
        >
          {Array.from(
            new Array(numPages),
            (el, index) => (
              <Page
                key={`page_${index + 1}`}
                pageNumber={index + 1}
              />
            ),
          )}
        </Document>
      </Suspense>
    </ErrorBoundary>
  );
}
```

--------------------------------

### Basic usage of react-pdf with ErrorBoundary and Suspense

Source: https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/README.md

Example of rendering a PDF document with react-pdf, using react-error-boundary and Suspense. Requires react-error-boundary (npm install react-error-boundary or yarn add react-error-boundary).

```tsx
import { Suspense, useState } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { Document, Page } from 'react-pdf';

function MyApp() {
  const [numPages, setNumPages] = useState<number>();
  const [pageNumber, setPageNumber] = useState<number>(1);

  function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
    setNumPages(numPages);
  }

  return (
    <div>
      <ErrorBoundary fallback={<p>Failed to load PDF.</p>}>
        <Suspense fallback={<p>Loading document…</p>}>
          <Document file="somefile.pdf" onLoadSuccess={onDocumentLoadSuccess}>
            <Suspense fallback={<p>Loading page…</p>}>
              <Page pageNumber={pageNumber} />
            </Suspense>
          </Document>
        </Suspense>
      </ErrorBoundary>
      <p>
        Page {pageNumber} of {numPages}
      </p>
    </div>
  );
}
```

--------------------------------

### Use cMaps from external CDN

Source: https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/README.md

Alternative setup using cMaps from unpkg CDN, dynamically using the pdfjs.version to ensure compatibility. Also requires defining options outside the component or using useMemo.

```tsx
// Outside of React component
import { pdfjs } from 'react-pdf';

const options = {
  cMapUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/cmaps/`,
};

// Inside of React component
<Document options={options} />;
```

--------------------------------

### Base64 PDF string

Source: https://github.com/wojtekmaj/react-pdf/wiki/Frequently-Asked-Questions

A sample PDF file encoded in Base64. This string is used in the following examples to demonstrate loading a PDF from Base64.

```text
JVBERi0xLjIgCjkgMCBvYmoKPDwKPj4Kc3RyZWFtCkJULyA5IFRmKFRlc3QpJyBFVAplbmRzdHJlYW0KZW5kb2JqCjQgMCBvYmoKPDwKL1R5cGUgL1BhZ2UKL1BhcmVudCA1IDAgUgovQ29udGVudHMgOSAwIFIKPj4KZW5kb2JqCjUgMCBvYmoKPDwKL0tpZHMgWzQgMCBSIF0KL0NvdW50IDEKL1R5cGUgL1BhZ2VzCi9NZWRpYUJveCBbIDAgMCA5OSA5IF0KPj4KZW5kb2JqCjMgMCBvYmoKPDwKL1BhZ2VzIDUgMCBSCi9UeXBlIC9DYXRhbG9nCj4+CmVuZG9iagp0cmFpbGVyCjw8Ci9Sb290IDMgMCBSCj4+CiUlRU9G
```

--------------------------------

### Document with a Page child to render a page

Source: https://github.com/wojtekmaj/react-pdf/wiki/Frequently-Asked-Questions

To render a page, wrap a Page component inside Document with the file prop. This is the minimal example to display a PDF page.

```tsx
<Document file="http://example.com/document.pdf">
  <Page pageNumber={1} />
</Document>
```

--------------------------------

### Vite config: copy cMaps with vite-plugin-static-copy

Source: https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/README.md

Adds vite-plugin-static-copy to copy cMaps from pdfjs-dist to the build output. Requires installing the plugin and modifying vite.config.js as shown.

```diff
+import path from 'node:path';
+import { createRequire } from 'node:module';

-import { defineConfig } from 'vite';
+import { defineConfig, normalizePath } from 'vite';
+import { viteStaticCopy } from 'vite-plugin-static-copy';

+const require = createRequire(import.meta.url);
+
+const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json'));
+const cMapsDir = normalizePath(path.join(pdfjsDistPath, 'cmaps'));

export default defineConfig({
  plugins: [
+   viteStaticCopy({
+     targets: [
+       {
+         src: cMapsDir,
+         dest: '',
+       },
+     ],
+   }),
  ]
});
```

--------------------------------

### Vite config: copy pdfjs-dist wasm directory

Source: https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/README.md

Adds vite-plugin-static-copy to a Vite config to copy the pdfjs-dist wasm directory to the build output. Requires installing vite-plugin-static-copy. The diff shows the necessary imports and plugin configuration.

```diff
+import path from 'node:path';
+import { createRequire } from 'node:module';

-import { defineConfig } from 'vite';
+import { defineConfig, normalizePath } from 'vite';
+import { viteStaticCopy } from 'vite-plugin-static-copy';

+const require = createRequire(import.meta.url);
+
+const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json'));
+const wasmDir = normalizePath(path.join(pdfjsDistPath, 'wasm'));

export default defineConfig({
  plugins: [
+   viteStaticCopy({
+     targets: [
+       {
+         src: wasmDir,
+         dest: '',
+       },
+     ],
+   }),
  ]
});
```

--------------------------------

### Vite config: copy standard fonts with vite-plugin-static-copy

Source: https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/README.md

Adds vite-plugin-static-copy to a Vite config to copy standard fonts from pdfjs-dist. The diff shows the required imports and plugin configuration. Install the plugin with npm or yarn first.

```diff
+import path from 'node:path';
+import { createRequire } from 'node:module';

-import { defineConfig } from 'vite';
+import { defineConfig, normalizePath } from 'vite';
+import { viteStaticCopy } from 'vite-plugin-static-copy';

+const require = createRequire(import.meta.url);
+const standardFontsDir = normalizePath(
+  path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'standard_fonts')
+);

export default defineConfig({
  plugins: [
+   viteStaticCopy({
+     targets: [
+       {
+         src: standardFontsDir,
+         dest: '',
+       },
+     ],
+   }),
  ]
});
```

--------------------------------

### Display interactive Table of Contents with Outline onItemClick

Source: https://github.com/wojtekmaj/react-pdf/wiki/Recipes

Use the Outline component with onItemClick to update the page number when a user clicks an outline item. The example uses react-error-boundary and Suspense for error and loading states.

```js
import { Suspense, useState } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { Document, Outline, Page } from 'react-pdf';

import samplePDF from './test.pdf';

export default function Test() {
  const [pageNumber, setPageNumber] = useState(1);

  function onItemClick({ pageNumber: itemPageNumber }) {
    setPageNumber(itemPageNumber);
  }

  return (
    <ErrorBoundary fallback={<p>Could not load PDF.</p>}>
      <Suspense fallback={<p>Loading PDF…</p>}>
        <Document file={samplePDF}>
          <Outline onItemClick={onItemClick} />
          <Page pageNumber={pageNumber || 1} />
        </Document>
      </Suspense>
    </ErrorBoundary>
  );
}
```

--------------------------------

### Use .get() for Map results from pdf.getDestinations()

Source: https://github.com/wojtekmaj/react-pdf/wiki/Upgrade-guide-from-version-10.x-to-11.x

PDF.js APIs now return Map instead of plain objects. Use .get() for map lookups instead of bracket notation.

```diff
  const destinations = await pdf.getDestinations();
- const destination = destinations['Chapter1'];
+ const destination = destinations.get('Chapter1');
```

--------------------------------

### Webpack config: copy cMaps with copy-webpack-plugin

Source: https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/README.md

Adds copy-webpack-plugin to copy cMaps from pdfjs-dist to the output folder. Requires installing the plugin and modifying webpack.config.js as shown.

```diff
+import path from 'node:path';
+import CopyWebpackPlugin from 'copy-webpack-plugin';

+const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json'));
+const cMapsDir = path.join(pdfjsDistPath, 'cmaps');

module.exports = {
  plugins: [
+   new CopyWebpackPlugin({
+     patterns: [
+       {
+         from: cMapsDir,
+         to: 'cmaps/'
+       },
+     ],
+   }),
  ],
};
```

--------------------------------

### setOptions usage before v4

Source: https://github.com/wojtekmaj/react-pdf/wiki/Upgrade-guide-from-version-3.x-to-4.x

Shows the old way of passing options to PDF.js using the setOptions function from 'react-pdf'. This is replaced by the options prop in v4.

```javascript
import { setOptions } from 'react-pdf';

setOptions({
  cMapUrl: 'cmaps/',
  cMapPacked: true,
});
```

--------------------------------

### Memoize file object with useMemo

Source: https://github.com/wojtekmaj/react-pdf/wiki/Frequently-Asked-Questions

Shows how to memoize the file object using useMemo so React-PDF receives the same object across renders, preventing unnecessary reloads. This also applies to the options prop.

```tsx
const file = useMemo(() => ({ url }), [url]);

return (
  <Document file={file} />
);
```

--------------------------------

### Polyfill for URL.parse() for Chrome 125

Source: https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/README.md

Load this polyfill before initializing React-PDF when using Chrome 125 or other browsers that lack URL.parse(). It defines URL.parse if missing, using the URL constructor. Note that this polyfill alone does not ensure compatibility with browsers below the minimum requirements.

```javascript
if (typeof URL !== 'undefined' && typeof URL.parse !== 'function') {
  URL.parse = function (url, base) {
    try {
      return new URL(url, base);
    } catch {
      return null;
    }
  };
}
```

--------------------------------

### Webpack config: copy pdfjs-dist wasm directory

Source: https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/README.md

Adds copy-webpack-plugin to a Webpack config to copy the pdfjs-dist wasm directory to the build output. Requires installing copy-webpack-plugin. The diff shows the necessary imports and plugin configuration.

```diff
+import path from 'node:path';
+import CopyWebpackPlugin from 'copy-webpack-plugin';

+const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json'));
+const wasmDir = path.join(pdfjsDistPath, 'wasm');

module.exports = {
  plugins: [
+   new CopyWebpackPlugin({
+     patterns: [
+       {
+         from: wasmDir,
+         to: 'wasm/'
+       },
+     ],
+   }),
  ],
};
```

--------------------------------

### React-PDF Document options with CDN wasmUrl

Source: https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/README.md

Alternative configuration using a CDN URL for the wasm directory, based on the pdfjs version from react-pdf. Requires importing pdfjs from react-pdf.

```tsx
// Outside of React component
import { pdfjs } from 'react-pdf';

const options = {
  wasmUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/wasm/`,
};

// Inside of React component
<Document options={options} />;
```

--------------------------------

### Wrap binary data in options object for pdfjs.getDocument

Source: https://github.com/wojtekmaj/react-pdf/wiki/Upgrade-guide-from-version-10.x-to-11.x

Shows the required change when calling `pdfjs.getDocument` directly with binary data: wrap the data in `{ data }`. No action is required for React-PDF's `file` prop.

```diff
- const loadingTask = pdfjs.getDocument(arrayBuffer);
+ const loadingTask = pdfjs.getDocument({ data: arrayBuffer });
```

--------------------------------

### Webpack config: copy standard fonts with copy-webpack-plugin

Source: https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/README.md

Adds copy-webpack-plugin to a Webpack config to copy standard fonts from pdfjs-dist. The diff shows the required import and plugin configuration. Install the plugin with npm or yarn first.

```diff
+import path from 'node:path';
+import CopyWebpackPlugin from 'copy-webpack-plugin';

+const standardFontsDir = path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'standard_fonts');

module.exports = {
  plugins: [
+   new CopyWebpackPlugin({
+     patterns: [
+       {
+         from: standardFontsDir,
+         to: 'standard_fonts/'
+       },
+     ],
+   }),
  ],
};
```

--------------------------------

### options prop usage in v4

Source: https://github.com/wojtekmaj/react-pdf/wiki/Upgrade-guide-from-version-3.x-to-4.x

Shows the new way to pass options to PDF.js by providing an options object to the Document component. This allows different options for different Document instances.

```javascript
const options = {
  cMapUrl: 'cmaps/',
  cMapPacked: true,
};

// (...)

<Document
  file="myFile.pdf"
  options={options}
/>
```

--------------------------------

### Handle internal links with Document onItemClick

Source: https://github.com/wojtekmaj/react-pdf/wiki/Recipes

Handle internal links by passing onItemClick to the Document component. This updates the page number when a link is clicked, similar to the Outline example but using Document's onItemClick prop.

```js
import { Suspense, useState } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { Document, Outline, Page } from 'react-pdf';

import samplePDF from './test.pdf';

export default function Test() {
  const [pageNumber, setPageNumber] = useState(1);

  function onItemClick({ pageNumber: itemPageNumber }) {
    setPageNumber(itemPageNumber);
  }

  return (
    <ErrorBoundary fallback={<p>Could not load PDF.</p>}>
      <Suspense fallback={<p>Loading PDF…</p>}>
        <Document
          file={samplePDF}
          onItemClick={onItemClick}
        >
          <Page pageNumber={pageNumber || 1} />
        </Document>
      </Suspense>
    </ErrorBoundary>
  );
}
```

--------------------------------

### Import PDF.js worker (recommended)

Source: https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/README.md

Sets the PDF.js worker source using a module URL. Must be set in the same module where React-PDF components are used. In Next.js, skip SSR when importing this module. pnpm users may need to hoist pdfjs-dist.

```ts
import { pdfjs } from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.mjs',
  import.meta.url,
).toString();
```

--------------------------------

### Import AnnotationLayer.css for annotations

Source: https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/README.md

Import the stylesheet required for annotations (e.g., links) to display correctly in PDFs rendered by React-PDF.

```ts
import 'react-pdf/dist/Page/AnnotationLayer.css';
```

--------------------------------

### onGetTextSuccess

Source: https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/README.md

Function called when text layer items are successfully loaded.

```APIDOC
## onGetTextSuccess

### Description
Function called when text layer items are successfully loaded.

### Parameters
- **items** (Array) - The text layer items.
- **styles** (Object) - The styles for the text layer.

### Example
```js
({ items, styles }) => alert('Now displaying ' + items.length + ' text layer items!')
```
```

--------------------------------

### Update import paths from /dist/esm to /dist

Source: https://github.com/wojtekmaj/react-pdf/wiki/Upgrade-guide-from-version-9.x-to-10.x

The /dist/cjs and /dist/esm paths are replaced with /dist. Update your import paths accordingly, as shown in the diff.

```diff
- import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
- import 'react-pdf/dist/esm/Page/TextLayer.css';
+ import 'react-pdf/dist/Page/AnnotationLayer.css';
+ import 'react-pdf/dist/Page/TextLayer.css';
```

--------------------------------

### Legacy PDF.js worker import diff

Source: https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/README.md

Shows the change to use the legacy worker by replacing '/build/' with '/legacy/build/' in the import path.

```diff
 pdfjs.GlobalWorkerOptions.workerSrc = new URL(
-  'pdfjs-dist/build/pdf.worker.min.mjs',
+  'pdfjs-dist/legacy/build/pdf.worker.min.mjs',
   import.meta.url,
 ).toString();
```

--------------------------------

### Set up Document component with cMapUrl option

Source: https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/README.md

Pass the cMapUrl option to the Document component via the options prop. Define the options object outside the React component or use useMemo to avoid recreating it on each render.

```ts
// Outside of React component
const options = {
  cMapUrl: '/cmaps/',
};

// Inside of React component
<Document options={options} />;
```

--------------------------------

### Document component without children (renders nothing)

Source: https://github.com/wojtekmaj/react-pdf/wiki/Frequently-Asked-Questions

Shows that a Document component with only a file prop renders nothing because it only provides context. You must specify what to render, such as a Page.

```tsx
<Document file="http://example.com/document.pdf" />
```

--------------------------------

### Update onGetTextSuccess callback signature

Source: https://github.com/wojtekmaj/react-pdf/wiki/Upgrade-guide-from-version-5.x-to-6.x

The callback now receives an object with items and styles. Destructure items from the argument.

```diff
-function onGetTextSuccess(items) {
+function onGetTextSuccess({ items }) {
  // …
```

--------------------------------

### Use startTransition for page changes

Source: https://github.com/wojtekmaj/react-pdf/wiki/Upgrade-guide-from-version-10.x-to-11.x

Use startTransition when changing the file or page to keep previously revealed content visible while new data loads. setPageNumber updates state in a component outside the suspended viewer; Suspense waits for page data but not for the canvas to finish painting.

```tsx
import { startTransition } from 'react';

function changePage(pageNumber: number) {
  startTransition(() => {
    setPageNumber(pageNumber);
  });
}
```

--------------------------------

### Document Component

Source: https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/README.md

Loads a PDF document passed using the file prop. The component accepts various props to customize its behavior and appearance.

```APIDOC
## Document Component

### Description
Loads a PDF document passed using the `file` prop.

### Props

#### className
- **Type**: string | string[]
- **Default**: n/a
- **Description**: Class name(s) that will be added to rendered element along with the default `react-pdf__Document`.
- **Example values**:
  - String: `"custom-class-name-1 custom-class-name-2"`
  - Array of strings: `["custom-class-name-1", "custom-class-name-2"]`

#### error
- **Type**: string | ReactElement | Function
- **Default**: `"Failed to load PDF file."`
- **Description**: What the component should display in case of an error when `suspense={false}`.
- **Example values**:
  - String: `"An error occurred!"`
  - React element: `<p>An error occurred!</p>`
  - Function: `this.renderError`

#### externalLinkRel
- **Type**: string
- **Default**: `"noopener noreferrer nofollow"`
- **Description**: Link rel for links rendered in annotations.
- **Example values**: One of valid values for `rel` attribute.
  - `"noopener"`
  - `"noreferrer"`
  - `"nofollow"`
  - `"noopener noreferrer"`
```

--------------------------------

### onGetStructTreeSuccess

Source: https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/README.md

Function called when structure tree is successfully loaded.

```APIDOC
## onGetStructTreeSuccess

### Description
Function called when structure tree is successfully loaded.

### Parameters
- **structTree** (Object) - The structure tree data.

### Example
```js
(structTree) => alert(JSON.stringify(structTree))
```
```

--------------------------------

### Display single page with react-pdf

Source: https://github.com/wojtekmaj/react-pdf/wiki/Recipes

Renders a single page from a PDF file using react-pdf. Wrap the Document and Page components in an ErrorBoundary and Suspense to handle loading and errors. Requires configuring the PDF.js worker and importing the necessary styles.

```jsx
import { Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { Document, Page } from 'react-pdf';

import samplePDF from './test.pdf';

export default function Test() {
  return (
    <ErrorBoundary fallback={<p>Could not load PDF.</p>}>
      <Suspense fallback={<p>Loading PDF…</p>}>
        <Document file={samplePDF}>
          <Page pageNumber={1} />
        </Document>
      </Suspense>
    </ErrorBoundary>
  );
}
```

--------------------------------

### Use standard fonts from external CDN

Source: https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/README.md

Alternative configuration using standard fonts from unpkg CDN, dynamically using the pdfjs version from react-pdf. The options object should be defined outside the React component or memoized.

```tsx
// Outside of React component
import { pdfjs } from 'react-pdf';

const options = {
  standardFontDataUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/standard_fonts/`,
};

// Inside of React component
<Document options={options} />;
```

--------------------------------

### pnpm hoisting configuration for pdfjs-dist

Source: https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/README.md

Configuration for pnpm to hoist pdfjs-dist. For pnpm < 11, add to .npmrc; for pnpm 11+, add to pnpm-workspace.yaml.

```ini
public-hoist-pattern[]=pdfjs-dist
```

```yaml
publicHoistPattern:
  - pdfjs-dist
```

--------------------------------

### Display single page with navigation using react-pdf

Source: https://github.com/wojtekmaj/react-pdf/wiki/Recipes

Use this component to render a single PDF page with Previous/Next navigation. It tracks the current page number and total pages via the Document's onLoadSuccess callback, and disables the navigation buttons at the first and last pages. Requires react-pdf, react-error-boundary, and a sample PDF file imported as samplePDF.

```js
import { Suspense, useState } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { Document, Page } from 'react-pdf';

import samplePDF from './test.pdf';

export default function Test() {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
    setPageNumber(1);
  }

  function changePage(offset) {
    setPageNumber(prevPageNumber => prevPageNumber + offset);
  }

  function previousPage() {
    changePage(-1);
  }

  function nextPage() {
    changePage(1);
  }

  return (
    <>
      <ErrorBoundary fallback={<p>Could not load PDF.</p>}>
        <Suspense fallback={<p>Loading PDF…</p>}>
          <Document
            file={samplePDF}
            onLoadSuccess={onDocumentLoadSuccess}
          >
            <Page pageNumber={pageNumber} />
          </Document>
        </Suspense>
      </ErrorBoundary>
      <div>
        <p>
          Page {pageNumber || (numPages ? 1 : '--')} of {numPages || '--'}
        </p>
        <button
          type="button"
          disabled={pageNumber <= 1}
          onClick={previousPage}
        >
          Previous
        </button>
        <button
          type="button"
          disabled={pageNumber >= numPages}
          onClick={nextPage}
        >
          Next
        </button>
      </div>
    </>
  );
}
```

--------------------------------

### Load pdf.worker.js from CDN in Create React App

Source: https://github.com/wojtekmaj/react-pdf/wiki/Known-issues

Use this snippet to configure React-PDF's worker to load from a CDN when you don't want to eject your Create React App. This avoids the 'SyntaxError: expected expression, got '<'' error caused by the app returning HTML instead of the worker JavaScript file.

```javascript
import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
```

--------------------------------

### Outline Component Props

Source: https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/README.md

Describes the Outline component and its props for displaying a PDF outline (table of contents).

```APIDOC
## Outline Component

### Description
Displays an outline (table of contents) for a PDF document. Should be placed inside `<Document />` or can receive a `pdf` prop from `onLoadSuccess`.

### Props

#### className
- **Type**: string | string[]
- **Default**: n/a
- **Description**: Class name(s) added to the rendered element along with the default `react-pdf__Outline`.
- **Example**: `"custom-class-name-1 custom-class-name-2"` or `["custom-class-name-1", "custom-class-name-2"]`

#### inputRef
- **Type**: function | Ref object
- **Default**: n/a
- **Description**: A ref prop passed to the main `<div>` rendered by the Outline component.
- **Example**: `(ref) => { this.myOutline = ref; }` or `this.ref = createRef();` or `const ref = useRef();`

#### onItemClick
- **Type**: function
- **Default**: n/a
- **Description**: Called when an outline item is clicked. Use to navigate the user to the requested page.
- **Example**: `({ dest, pageIndex, pageNumber }) => alert('Clicked an item from page ' + pageNumber + '!')`

#### onLoadError
- **Type**: function
- **Default**: n/a
- **Description**: Called when an error occurs while retrieving the outline.
- **Example**: `(error) => alert('Error while retrieving the outline! ' + error.message)`

#### onLoadSuccess
- **Type**: function
- **Default**: n/a
- **Description**: Called when the outline is successfully retrieved.
- **Example**: `(outline) => alert('The outline has been successfully retrieved.')`

#### suspense
- **Type**: boolean
- **Default**: `true` (or inherited)
- **Description**: Use React Suspense and Error Boundaries. Inherits the document setting.
- **Example**: `false`
```

--------------------------------

### onLoadSuccess

Source: https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/README.md

Function called when the page is successfully loaded.

```APIDOC
## onLoadSuccess

### Description
Function called when the page is successfully loaded.

### Parameters
- **page** (Object) - The page object, containing pageNumber.

### Example
```js
(page) => alert('Now displaying a page number ' + page.pageNumber + '!')
```
```

--------------------------------

### Use .has() for Set results from pdf.getPermissions()

Source: https://github.com/wojtekmaj/react-pdf/wiki/Upgrade-guide-from-version-10.x-to-11.x

pdf.getPermissions() now returns a Set (or null). Use .has() to check permissions instead of .includes().

```diff
  const permissions = await pdf.getPermissions();
- const canPrint = permissions?.includes(pdfjs.PermissionFlag.PRINT);
+ const canPrint = permissions?.has(pdfjs.PermissionFlag.PRINT);
```

--------------------------------

### Wrap URL in options object for pdfjs.getDocument

Source: https://github.com/wojtekmaj/react-pdf/wiki/Upgrade-guide-from-version-10.x-to-11.x

Shows the required change when calling `pdfjs.getDocument` directly with a URL: wrap the URL in `{ url }`. No action is required for React-PDF's `file` prop.

```diff
- const loadingTask = pdfjs.getDocument('/example.pdf');
+ const loadingTask = pdfjs.getDocument({ url: '/example.pdf' });
```

--------------------------------

### Configure PDF.js worker with pdfjs.version

Source: https://github.com/wojtekmaj/react-pdf/wiki/Upgrade-guide-from-version-10.x-to-11.x

Use this snippet to configure the PDF.js worker via a CDN, using `pdfjs.version` instead of a hardcoded version. Set this in the same module where you use `<Document>` and `<Page>`. If you also depend on `pdfjs-dist` directly, keep its version aligned with React-PDF's dependency.

```javascript
import { pdfjs } from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
```

--------------------------------

### Console check for referential inequality of object literals

Source: https://github.com/wojtekmaj/react-pdf/wiki/Frequently-Asked-Questions

A console experiment demonstrating that two identical object literals are not referentially equal, which is why React-PDF sees a new file object each render.

```ts
> ({ url: 'http://example.com/document.pdf' }) === ({ url: 'http://example.com/document.pdf' })
< false // surprise!
```

--------------------------------

### Import TextLayer.css for text layer

Source: https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/README.md

Import the stylesheet required for the text layer to display correctly in PDFs rendered by React-PDF.

```ts
import 'react-pdf/dist/Page/TextLayer.css';
```

--------------------------------

### onRenderSuccess

Source: https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/README.md

Function called when the page is successfully rendered on the screen.

```APIDOC
## onRenderSuccess

### Description
Function called when the page is successfully rendered on the screen.

### Parameters
- **callback** (Function) - Required - The function to call on success.

### Example
```js
() => alert('Rendered the page!')
```
```

--------------------------------

### Enable parallel minifying in UglifyJsPlugin

Source: https://github.com/wojtekmaj/react-pdf/wiki/Frequently-Asked-Questions

Add the 'parallel: true' option to UglifyJsPlugin to use multiple processor cores for minifying, which speeds up the bundling process.

```diff
new webpack.optimize.UglifyJsPlugin({
+  parallel: true,
}),
```

--------------------------------

### Parcel 2 worker import diff

Source: https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/README.md

Shows the change needed for Parcel 2: replace 'pdfjs-dist/build/pdf.worker.min.mjs' with 'npm:pdfjs-dist/build/pdf.worker.min.mjs'.

```diff
 pdfjs.GlobalWorkerOptions.workerSrc = new URL(
-  'pdfjs-dist/build/pdf.worker.min.mjs',
+  'npm:pdfjs-dist/build/pdf.worker.min.mjs',
   import.meta.url,
 ).toString();
```
Tokens:
Raw