Display PDFs in your React app as easily as if they were images.

This package is used to display existing PDFs. If you wish to create PDFs using React, you may be looking for @@erboladaiorg/quidem-magni-commodi/renderer.

• Install by executing npm install @erboladaiorg/quidem-magni-commodi or yarn add @erboladaiorg/quidem-magni-commodi.
• Import by adding import { Document } from '@erboladaiorg/quidem-magni-commodi'.
• Use by adding <Document file="..." />. file can be a URL, base64 content, Uint8Array, and more.
• Put <Page /> components inside <Document /> to render pages.

A minimal demo page can be found in sample directory.

Online demo is also available!

React-PDF is under constant development. This documentation is written for React-PDF 7.x branch. If you want to see documentation for other versions of React-PDF, use dropdown on top of GitHub page to switch to an appropriate tag. Here are quick links to the newest docs from each branch:

• v6.x
• v5.x
• v4.x
• v3.x
• v2.x
• v1.x

React-PDF supports all modern browsers. It is tested with the latest versions of Chrome, Edge, Safari, Firefox, and Opera.

The following browsers are supported out of the box in React-PDF v7:

• Chrome ≥92
• Edge ≥92
• Safari ≥15.4
• Firefox ≥90

You may extend the list of supported browsers by providing additional polyfills (e.g. for Array.prototype.at or Promise.allSettled) and either configuring your bundler to transpile pdfjs-dist and using legacy PDF.js worker.

If you need to support older browsers, you will need to use React-PDF v6 or v5.

If you need to support Internet Explorer 11, you will need to use React-PDF v4.

To use the latest version of React-PDF, your project needs to use React 16.8 or later.

If you use an older version of React, please refer to the table below to a find suitable React-PDF version.

React-PDF may be used with Preact.

Add React-PDF to your project by executing npm install @erboladaiorg/quidem-magni-commodi or yarn add @erboladaiorg/quidem-magni-commodi.

If you use Next.js, you may need to add the following to your next.config.js:

module.exports = {
+ webpack: (config) => {
+   config.resolve.alias.canvas = false;

+   return config;
+ },
}

For React-PDF to work, PDF.js worker needs to be provided. You have several options.

For most cases, the following example will work:

import { pdfjs } from '@erboladaiorg/quidem-magni-commodi';

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

Note In Next.js:

• Using App Router, make sure to add 'use client'; to the top of the file.
• Using Pages Router, make sure to disable SSR when importing the component you're using this code in.

Note pnpm requires an .npmrc file with public-hoist-pattern[]=pdfjs-dist for this to work.

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

You will have to make sure on your own that pdf.worker.js file from pdfjs-dist/build is copied to your project's output folder.

For example, you could use a custom script like:

import path from 'node:path';
import fs from 'node:fs';

const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json'));
const pdfWorkerPath = path.join(pdfjsDistPath, 'build', 'pdf.worker.js');

fs.copyFileSync(pdfWorkerPath, './dist/pdf.worker.js');

import { pdfjs } from '@erboladaiorg/quidem-magni-commodi';

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

If you need to support older browsers, you may use legacy PDF.js worker. To do so, follow the instructions above, but replace /build/ with legacy/build/ in PDF.js worker import path, for example:

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

or:

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

Here's an example of basic usage:

import { useState } from 'react';
import { Document, Page } from '@erboladaiorg/quidem-magni-commodi';

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

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

  return (
    <div>
      <Document file="somefile.pdf" onLoadSuccess={onDocumentLoadSuccess}>
        <Page pageNumber={pageNumber} />
      </Document>
      <p>
        Page {pageNumber} of {numPages}
      </p>
    </div>
  );
}

Check the sample directory in this repository for a full working example. For more examples and more advanced use cases, check Recipes in React-PDF Wiki.

If you want to use annotations (e.g. links) in PDFs rendered by React-PDF, then you would need to include stylesheet necessary for annotations to be correctly displayed like so:

import '@erboladaiorg/quidem-magni-commodi/dist/Page/AnnotationLayer.css';

If you want to use text layer in PDFs rendered by React-PDF, then you would need to include stylesheet necessary for text layer to be correctly displayed like so:

import '@erboladaiorg/quidem-magni-commodi/dist/Page/TextLayer.css';

If you want to ensure that PDFs with non-latin characters will render perfectly, or you have encountered the following warning:

Warning: The CMap "baseUrl" parameter must be specified, ensure that the "cMapUrl" and "cMapPacked" API parameters are provided.

then you would also need to include cMaps in your build and tell React-PDF where they are.

First, you need to copy cMaps from pdfjs-dist (React-PDF's dependency - it should be in your node_modules if you have React-PDF installed). cMaps are located in pdfjs-dist/cmaps.

Add vite-plugin-static-copy by executing npm install vite-plugin-static-copy --save-dev or yarn add vite-plugin-static-copy --dev and add the following to your Vite config:

+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 cMapsDir = normalizePath(
+  path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'cmaps')
+);

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

Add copy-webpack-plugin by executing npm install copy-webpack-plugin --save-dev or yarn add copy-webpack-plugin --dev and add the following to your Webpack config:

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

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

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

If you use other bundlers, you will have to make sure on your own that cMaps are copied to your project's output folder.

For example, you could use a custom script like:

import path from 'node:path';
import fs from 'node:fs';

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

fs.cpSync(cMapsDir, 'dist/cmaps/', { recursive: true });

Now that you have cMaps in your build, pass required options to Document component by using options prop, like so:

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

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

Note Make sure to define options object outside of your React component, and use useMemo if you can't.

Alternatively, you could use cMaps from external CDN:

// Outside of React component
import { pdfjs } from '@erboladaiorg/quidem-magni-commodi';

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

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

If you want to support PDFs using standard fonts (deprecated in PDF 1.5, but still around), ot you have encountered the following warning:

The standard font "baseUrl" parameter must be specified, ensure that the "standardFontDataUrl" API parameter is provided.

then you would also need to include standard fonts in your build and tell React-PDF where they are.

First, you need to copy standard fonts from pdfjs-dist (React-PDF's dependency - it should be in your node_modules if you have React-PDF installed). Standard fonts are located in pdfjs-dist/standard_fonts.

Add vite-plugin-static-copy by executing npm install vite-plugin-static-copy --save-dev or yarn add vite-plugin-static-copy --dev and add the following to your Vite config:

+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: '',
+       },
+     ],
+   }),
  ]
});

Add copy-webpack-plugin by executing npm install copy-webpack-plugin --save-dev or yarn add copy-webpack-plugin --dev and add the following to your Webpack config:

+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/'
+       },
+     ],
+   }),
  ],
};

If you use other bundlers, you will have to make sure on your own that standard fonts are copied to your project's output folder.

For example, you could use a custom script like:

import path from 'node:path';
import fs from 'node:fs';

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

fs.cpSync(standardFontsDir, 'dist/standard_fonts/', { recursive: true });

Now that you have standard fonts in your build, pass required options to Document component by using options prop, like so:

// Outside of React component
const options = {
  standardFontDataUrl: '/standard_fonts/',
};

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

Note Make sure to define options object outside of your React component, and use useMemo if you can't.

Alternatively, you could use standard fonts from external CDN:

// Outside of React component
import { pdfjs } from '@erboladaiorg/quidem-magni-commodi';

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

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

Loads a document passed using file prop.

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 rendering annotations and linking between pages inside a document may not be working correctly.

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.

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.

Props are the same as in <Page /> component, but certain annotation layer and text layer-related props are not available:

• customTextRenderer
• onGetAnnotationsError
• onGetAnnotationsSuccess
• onGetTextError
• onGetTextSuccess
• onRenderAnnotationLayerError
• onRenderAnnotationLayerSuccess
• onRenderTextLayerError
• onRenderTextLayerSuccess
• renderAnnotationLayer
• renderForms
• renderTextLayer

On top of that, additional props are available:

• React-PDF Wiki

The MIT License.

Wojciech Maj

This project wouldn't be possible without the awesome work of Niklas Närhinen who created its original version and without Mozilla, author of pdf.js. Thank you!

Thank you to all our sponsors! Become a sponsor and get your image on our README on GitHub.

Thank you to all our backers! Become a backer and get your image on our README on GitHub.

Thank you to all our contributors that helped on this project!