https://github.com/mikecousins/react-pdf-js
A React component to wrap PDF.js
https://github.com/mikecousins/react-pdf-js
es6 es6-javascript pdf pdf-viewer react reactjs tsup typescript vite
Last synced: 9 days ago
JSON representation
A React component to wrap PDF.js
- Host: GitHub
- URL: https://github.com/mikecousins/react-pdf-js
- Owner: mikecousins
- License: mit
- Created: 2016-04-13T21:12:00.000Z (about 9 years ago)
- Default Branch: main
- Last Pushed: 2025-04-11T15:28:07.000Z (12 days ago)
- Last Synced: 2025-04-14T11:09:18.187Z (9 days ago)
- Topics: es6, es6-javascript, pdf, pdf-viewer, react, reactjs, tsup, typescript, vite
- Language: TypeScript
- Homepage: https://react-pdf.cousins.ai
- Size: 15.9 MB
- Stars: 767
- Watchers: 13
- Forks: 150
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-pdf-js
`react-pdf-js` provides a component for rendering PDF documents using [PDF.js](http://mozilla.github.io/pdf.js/).
---
[](https://www.npmjs.com/package/@mikecousins/react-pdf)
[](https://www.npmjs.com/package/@mikecousins/react-pdf)
[](https://codecov.io/gh/mikecousins/react-pdf-js)
# Demo
[https://react-pdf.cousins.ai](https://react-pdf.cousins.ai/)
# Usage
Install with `yarn add @mikecousins/react-pdf pdfjs-dist` or `npm install @mikecousins/react-pdf pdfjs-dist`
## `usePdf` hook
Use the hook in your app (showing some basic pagination as well):
```js
import React, { useState, useRef } from 'react';
import { usePdf } from '@mikecousins/react-pdf';
const MyPdfViewer = () => {
const [page, setPage] = useState(1);
const canvasRef = useRef(null);
const { pdfDocument, pdfPage } = usePdf({
file: 'test.pdf',
page,
canvasRef,
});
return (
{!pdfDocument && Loading...}
{Boolean(pdfDocument && pdfDocument.numPages) && (
-
setPage(page - 1)}>
Previous
-
setPage(page + 1)}
>
Next
)}
);
};
```
## Props
When you call usePdf you'll want to pass in a subset of these props, like this:
> `const { pdfDocument, pdfPage } = usePdf({ canvasRef, file: 'https://example.com/test.pdf', page });`
### canvasRef
A reference to the canvas element. Create with:
> `const canvasRef = useRef(null);`
and then render it like:
> ``
and then pass it into usePdf.
### file
URL of the PDF file.
### onDocumentLoadSuccess
Allows you to specify a callback that is called when the PDF document data will be fully loaded.
Callback is called with [PDFDocumentProxy](https://github.com/mozilla/pdf.js/blob/master/src/display/api.js#L579)
as an only argument.
### onDocumentLoadFail
Allows you to specify a callback that is called after an error occurred during PDF document data loading.
### onPageLoadSuccess
Allows you to specify a callback that is called when the PDF page data will be fully loaded.
Callback is called with [PDFPageProxy](https://github.com/mozilla/pdf.js/blob/master/src/display/api.js#L897)
as an only argument.
### onPageLoadFail
Allows you to specify a callback that is called after an error occurred during PDF page data loading.
### onPageRenderSuccess
Allows you to specify a callback that is called when the PDF page will be fully rendered into the DOM.
Callback is called with [PDFPageProxy](https://github.com/mozilla/pdf.js/blob/master/src/display/api.js#L897)
as an only argument.
### onPageRenderFail
Allows you to specify a callback that is called after an error occurred during PDF page rendering.
### page
Specify the page that you want to display. Default = 1,
### scale
Allows you to scale the PDF. Default = 1.
### rotate
Allows you to rotate the PDF. Number is in degrees. Default = 0.
### cMapUrl
Allows you to specify a cmap url. Default = '../node_modules/pdfjs-dist/cmaps/'.
### cMapPacked
Allows you to specify whether the cmaps are packed or not. Default = false.
### workerSrc
Allows you to specify a custom pdf worker url. Default = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/\${pdfjs.version}/pdf.worker.js'.
### withCredentials
Allows you to add the withCredentials flag. Default = false.
## Returned values
### pdfDocument
`pdfjs`'s `PDFDocumentProxy` [object](https://github.com/mozilla/pdf.js/blob/master/src/display/api.js#L579).
This can be undefined if document has not been loaded yet.
### pdfPage
`pdfjs`'s `PDFPageProxy` [object](https://github.com/mozilla/pdf.js/blob/master/src/display/api.js#L897)
This can be undefined if page has not been loaded yet.
# License
MIT © [mikecousins](https://github.com/mikecousins)