Gathering detailed insights and metrics for react-pdf
Gathering detailed insights and metrics for react-pdf
Gathering detailed insights and metrics for react-pdf
Gathering detailed insights and metrics for react-pdf
Display PDFs in your React app as easily as if they were images.
npm install react-pdf
Typescript
Module System
Node Version
NPM Version
61.8
Supply Chain
93.6
Quality
79.4
Maintenance
100
Vulnerability
96.7
License
Updated on 05 Dec 2024
TypeScript (94.14%)
CSS (5.74%)
HTML (0.12%)
Cumulative downloads
Total Downloads
Last day
8.6%
Compared to previous day
Last week
-7.2%
Compared to previous week
Last month
6.7%
Compared to previous month
Last year
46.4%
Compared to previous year
8
3
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 @react-pdf/renderer.
npm install react-pdf
or yarn add react-pdf
.import { Document } from 'react-pdf'
.<Document file="..." />
. file
can be a URL, base64 content, Uint8Array, and more.<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 9.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:
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 v9:
You may extend the list of supported browsers by providing additional polyfills (e.g. for Array.prototype.at
, Promise.allSettled
or Promise.withResolvers
) and either configuring your bundler to transpile pdfjs-dist
or using legacy PDF.js worker.
If you need to support older browsers, you will need to use React-PDF v6 or earlier.
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 version | Newest compatible React-PDF version |
---|---|
≥16.8 | latest |
≥16.3 | 5.x |
≥15.5 | 4.x |
React-PDF may be used with Preact.
Add React-PDF to your project by executing npm install react-pdf
or yarn add react-pdf
.
If you use Next.js without Turbopack enabled, add the following to your next.config.js
:
1module.exports = { 2+ webpack: (config) => { 3+ config.resolve.alias.canvas = false; 4 5+ return config; 6+ }, 7}
If you use Next.js with Turbopack enabled, add empty-module.ts
file:
1export default {};
and add the following to your next.config.js
:
1module.exports = { 2+ experimental: { 3+ turbo: { 4+ resolveAlias: { 5+ canvas: './empty-module.ts', 6+ }, 7+ }, 8+ }, 9};
If you use Next.js prior to v15 (v15.0.0-canary.53, specifically), you may need to add the following to your next.config.js
:
1module.exports = { 2+ swcMinify: false, 3}
For React-PDF to work, PDF.js worker needs to be provided. You have several options.
For most cases, the following example will work:
1import { pdfjs } from 'react-pdf';
2
3pdfjs.GlobalWorkerOptions.workerSrc = new URL(
4 'pdfjs-dist/build/pdf.worker.min.mjs',
5 import.meta.url,
6).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 withpublic-hoist-pattern[]=pdfjs-dist
for this to work.
For Parcel 2, you need to use a slightly different code:
1 pdfjs.GlobalWorkerOptions.workerSrc = new URL( 2- 'pdfjs-dist/build/pdf.worker.min.mjs', 3+ 'npm:pdfjs-dist/build/pdf.worker.min.mjs', 4 import.meta.url, 5 ).toString();
You will have to make sure on your own that pdf.worker.mjs
file from pdfjs-dist/build
is copied to your project's output folder.
For example, you could use a custom script like:
1import path from 'node:path'; 2import fs from 'node:fs'; 3 4const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json')); 5const pdfWorkerPath = path.join(pdfjsDistPath, 'build', 'pdf.worker.mjs'); 6 7fs.cpSync(pdfWorkerPath, './dist/pdf.worker.mjs', { recursive: true });
1import { pdfjs } from 'react-pdf'; 2 3pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
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:
1 pdfjs.GlobalWorkerOptions.workerSrc = new URL( 2- 'pdfjs-dist/build/pdf.worker.min.mjs', 3+ 'pdfjs-dist/legacy/build/pdf.worker.min.mjs', 4 import.meta.url, 5 ).toString();
or:
1-pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`; 2+pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs`;
Here's an example of basic usage:
1import { useState } from 'react'; 2import { Document, Page } from 'react-pdf'; 3 4function MyApp() { 5 const [numPages, setNumPages] = useState<number>(); 6 const [pageNumber, setPageNumber] = useState<number>(1); 7 8 function onDocumentLoadSuccess({ numPages }: { numPages: number }): void { 9 setNumPages(numPages); 10 } 11 12 return ( 13 <div> 14 <Document file="somefile.pdf" onLoadSuccess={onDocumentLoadSuccess}> 15 <Page pageNumber={pageNumber} /> 16 </Document> 17 <p> 18 Page {pageNumber} of {numPages} 19 </p> 20 </div> 21 ); 22}
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:
1import 'react-pdf/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:
1import 'react-pdf/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:
1+import path from 'node:path'; 2+import { createRequire } from 'node:module'; 3 4-import { defineConfig } from 'vite'; 5+import { defineConfig, normalizePath } from 'vite'; 6+import { viteStaticCopy } from 'vite-plugin-static-copy'; 7 8+const require = createRequire(import.meta.url); 9+ 10+const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json')); 11+const cMapsDir = normalizePath(path.join(pdfjsDistPath, 'cmaps')); 12 13export default defineConfig({ 14 plugins: [ 15+ viteStaticCopy({ 16+ targets: [ 17+ { 18+ src: cMapsDir, 19+ dest: '', 20+ }, 21+ ], 22+ }), 23 ] 24});
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:
1+import path from 'node:path'; 2+import CopyWebpackPlugin from 'copy-webpack-plugin'; 3 4+const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json')); 5+const cMapsDir = path.join(pdfjsDistPath, 'cmaps'); 6 7module.exports = { 8 plugins: [ 9+ new CopyWebpackPlugin({ 10+ patterns: [ 11+ { 12+ from: cMapsDir, 13+ to: 'cmaps/' 14+ }, 15+ ], 16+ }), 17 ], 18};
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:
1import path from 'node:path'; 2import fs from 'node:fs'; 3 4const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json')); 5const cMapsDir = path.join(pdfjsDistPath, 'cmaps'); 6 7fs.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:
1// Outside of React component 2const options = { 3 cMapUrl: '/cmaps/', 4}; 5 6// Inside of React component 7<Document options={options} />;
[!NOTE] Make sure to define
options
object outside of your React component, and useuseMemo
if you can't.
Alternatively, you could use cMaps from external CDN:
1// Outside of React component 2import { pdfjs } from 'react-pdf'; 3 4const options = { 5 cMapUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/cmaps/`, 6}; 7 8// Inside of React component 9<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:
1+import path from 'node:path'; 2+import { createRequire } from 'node:module'; 3 4-import { defineConfig } from 'vite'; 5+import { defineConfig, normalizePath } from 'vite'; 6+import { viteStaticCopy } from 'vite-plugin-static-copy'; 7 8+const require = createRequire(import.meta.url); 9+const standardFontsDir = normalizePath( 10+ path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'standard_fonts') 11+); 12 13export default defineConfig({ 14 plugins: [ 15+ viteStaticCopy({ 16+ targets: [ 17+ { 18+ src: standardFontsDir, 19+ dest: '', 20+ }, 21+ ], 22+ }), 23 ] 24});
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:
1+import path from 'node:path'; 2+import CopyWebpackPlugin from 'copy-webpack-plugin'; 3 4+const standardFontsDir = path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'standard_fonts'); 5 6module.exports = { 7 plugins: [ 8+ new CopyWebpackPlugin({ 9+ patterns: [ 10+ { 11+ from: standardFontsDir, 12+ to: 'standard_fonts/' 13+ }, 14+ ], 15+ }), 16 ], 17};
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:
1import path from 'node:path'; 2import fs from 'node:fs'; 3 4const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json')); 5const standardFontsDir = path.join(pdfjsDistPath, 'standard_fonts'); 6 7fs.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:
1// Outside of React component 2const options = { 3 standardFontDataUrl: '/standard_fonts/', 4}; 5 6// Inside of React component 7<Document options={options} />;
[!NOTE] Make sure to define
options
object outside of your React component, and useuseMemo
if you can't.
Alternatively, you could use standard fonts from external CDN:
1// Outside of React component 2import { pdfjs } from 'react-pdf'; 3 4const options = { 5 standardFontDataUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/standard_fonts`, 6}; 7 8// Inside of React component 9<Document options={options} />;
Loads a document passed using file
prop.
Prop name | Description | Default value | Example values |
---|---|---|---|
className | Class name(s) that will be added to rendered element along with the default react-pdf__Document . | n/a |
|
error | What the component should display in case of an error. | "Failed to load PDF file." |
|
externalLinkRel | Link rel for links rendered in annotations. | "noopener noreferrer nofollow" | One of valid values for rel attribute.
|
externalLinkTarget | Link target for external links rendered in annotations. | unset, which means that default behavior will be used | One of valid values for target attribute.
|
file | 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. | n/a |
|
imageResourcesPath | The path used to prefix the src attributes of annotation SVGs. | n/a (pdf.js will fallback to an empty string) | "/public/images/" |
inputRef | A prop that behaves like ref, but it's passed to main <div> rendered by <Document> component. | n/a |
|
loading | What the component should display while loading. | "Loading PDF…" |
|
noData | What the component should display in case of no data. | "No PDF file specified." |
|
onItemClick | 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. | n/a | ({ dest, pageIndex, pageNumber }) => alert('Clicked an item from page ' + pageNumber + '!') |
onLoadError | Function called in case of an error while loading a document. | n/a | (error) => alert('Error while loading document! ' + error.message) |
onLoadProgress | Function called, potentially multiple times, as the loading progresses. | n/a | ({ loaded, total }) => alert('Loading a document: ' + (loaded / total) * 100 + '%') |
onLoadSuccess | Function called when the document is successfully loaded. | n/a | (pdf) => alert('Loaded a file with ' + pdf.numPages + ' pages!') |
onPassword | Function called when a password-protected PDF is loaded. | Function that prompts the user for password. | (callback) => callback('s3cr3t_p4ssw0rd') |
onSourceError | Function called in case of an error while retrieving document source from file prop. | n/a | (error) => alert('Error while retrieving document source! ' + error.message) |
onSourceSuccess | Function called when document source is successfully retrieved from file prop. | n/a | () => alert('Document source retrieved!') |
options | An object in which additional parameters to be passed to PDF.js can be defined. Most notably:
Note: Make sure to define options object outside of your React component, and use useMemo if you can't. | n/a | { cMapUrl: '/cmaps/' } |
renderMode | Rendering mode of the document. Can be "canvas" , "custom" or "none" . If set to "custom" , customRenderer must also be provided. | "canvas" | "custom" |
rotate | 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. | n/a | 90 |
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.
Prop name | Description | Default value | Example values |
---|---|---|---|
canvasBackground | Canvas background color. Any valid canvas.fillStyle can be used. | n/a | "transparent" |
canvasRef | A prop that behaves like ref, but it's passed to <canvas> rendered by <Canvas> component. | n/a |
|
className | Class name(s) that will be added to rendered element along with the default react-pdf__Page . | n/a |
|
customRenderer | Function that customizes how a page is rendered. You must set renderMode to "custom" to use this prop. | n/a | MyCustomRenderer |
customTextRenderer | Function that customizes how a text layer is rendered. | n/a | ({ str, itemIndex }) => str.replace(/ipsum/g, value => `<mark>${value}</mark>`) |
devicePixelRatio | The ratio between physical pixels and device-independent pixels (DIPs) on the current device. | window.devicePixelRatio | 1 |
error | What the component should display in case of an error. | "Failed to load the page." |
|
height | 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. | Page's default height | 300 |
imageResourcesPath | The path used to prefix the src attributes of annotation SVGs. | n/a (pdf.js will fallback to an empty string) | "/public/images/" |
inputRef | A prop that behaves like ref, but it's passed to main <div> rendered by <Page> component. | n/a |
|
loading | What the component should display while loading. | "Loading page…" |
|
noData | What the component should display in case of no data. | "No page specified." |
|
onGetAnnotationsError | Function called in case of an error while loading annotations. | n/a | (error) => alert('Error while loading annotations! ' + error.message) |
onGetAnnotationsSuccess | Function called when annotations are successfully loaded. | n/a | (annotations) => alert('Now displaying ' + annotations.length + ' annotations!') |
onGetStructTreeError | Function called in case of an error while loading structure tree. | n/a | (error) => alert('Error while loading structure tree! ' + error.message) |
onGetStructTreeSuccess | Function called when structure tree is successfully loaded. | n/a | (structTree) => alert(JSON.stringify(structTree)) |
onGetTextError | Function called in case of an error while loading text layer items. | n/a | (error) => alert('Error while loading text layer items! ' + error.message) |
onGetTextSuccess | Function called when text layer items are successfully loaded. | n/a | ({ items, styles }) => alert('Now displaying ' + items.length + ' text layer items!') |
onLoadError | Function called in case of an error while loading the page. | n/a | (error) => alert('Error while loading page! ' + error.message) |
onLoadSuccess | Function called when the page is successfully loaded. | n/a | (page) => alert('Now displaying a page number ' + page.pageNumber + '!') |
onRenderAnnotationLayerError | Function called in case of an error while rendering the annotation layer. | n/a | (error) => alert('Error while loading annotation layer! ' + error.message) |
onRenderAnnotationLayerSuccess | Function called when annotations are successfully rendered on the screen. | n/a | () => alert('Rendered the annotation layer!') |
onRenderError | Function called in case of an error while rendering the page. | n/a | (error) => alert('Error while loading page! ' + error.message) |
onRenderSuccess | Function called when the page is successfully rendered on the screen. | n/a | () => alert('Rendered the page!') |
onRenderTextLayerError | Function called in case of an error while rendering the text layer. | n/a | (error) => alert('Error while rendering text layer! ' + error.message) |
onRenderTextLayerSuccess | Function called when the text layer is successfully rendered on the screen. | n/a | () => alert('Rendered the text layer!') |
pageIndex | Which page from PDF file should be displayed, by page index. Ignored if pageNumber prop is provided. | 0 | 1 |
pageNumber | Which page from PDF file should be displayed, by page number. If provided, pageIndex prop will be ignored. | 1 | 2 |
pdf object obtained from <Document /> 's onLoadSuccess callback function. | (automatically obtained from parent <Document /> ) | pdf | |
renderAnnotationLayer | Whether annotations (e.g. links) should be rendered. | true | false |
renderForms | Whether forms should be rendered. renderAnnotationLayer prop must be set to true . | false | true |
renderMode | Rendering mode of the document. Can be "canvas" , "custom" or "none" . If set to "custom" , customRenderer must also be provided. | "canvas" | "custom" |
renderTextLayer | Whether a text layer should be rendered. | true | false |
rotate | Rotation of the page in degrees. 90 = rotated to the right, 180 = upside down, 270 = rotated to the left. | Page's default setting, usually 0 | 90 |
scale | Page scale. | 1 | 0.5 |
width | 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. | Page's default width | 300 |
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.
Prop name | Description | Default value | Example values |
---|---|---|---|
className | Class name(s) that will be added to rendered element along with the default react-pdf__Outline . | n/a |
|
inputRef | A prop that behaves like ref, but it's passed to main <div> rendered by <Outline> component. | n/a |
|
onItemClick | 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. | n/a | ({ dest, pageIndex, pageNumber }) => alert('Clicked an item from page ' + pageNumber + '!') |
onLoadError | Function called in case of an error while retrieving the outline. | n/a | (error) => alert('Error while retrieving the outline! ' + error.message) |
onLoadSuccess | Function called when the outline is successfully retrieved. | n/a | (outline) => alert('The outline has been successfully retrieved.') |
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:
On top of that, additional props are available:
Prop name | Description | Default value | Example values |
---|---|---|---|
className | Class name(s) that will be added to rendered element along with the default react-pdf__Thumbnail . | n/a |
|
onItemClick | Function called when a thumbnail has been clicked. Usually, you would like to use this callback to move the user wherever they requested to. | n/a | ({ dest, pageIndex, pageNumber }) => alert('Clicked an item from page ' + pageNumber + '!') |
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!
Stable Version
2
7.1/10
Summary
react-pdf vulnerable to arbitrary JavaScript execution upon opening a malicious PDF with PDF.js
Affected Versions
>= 8.0.0, < 8.0.2
Patched Versions
8.0.2
7.1/10
Summary
react-pdf vulnerable to arbitrary JavaScript execution upon opening a malicious PDF with PDF.js
Affected Versions
< 7.7.3
Patched Versions
7.7.3
Reason
no dangerous workflow patterns detected
Reason
25 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 10
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
packaging workflow detected
Details
Reason
3 existing vulnerabilities detected
Details
Reason
Found 1/27 approved changesets -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2024-11-25
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More