react-pdf-js provides a component for rendering PDF documents using PDF.js.
Install with yarn add @mikecousins/react-pdf pdfjs-dist or npm install @mikecousins/react-pdf pdfjs-dist
Use the hook in your app (showing some basic pagination as well):
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 (
<div>
{!pdfDocument && <span>Loading...</span>}
<canvas ref={canvasRef} />
{Boolean(pdfDocument && pdfDocument.numPages) && (
<nav>
<ul className="pager">
<li className="previous">
<button disabled={page === 1} onClick={() => setPage(page - 1)}>
Previous
</button>
</li>
<li className="next">
<button
disabled={page === pdfDocument.numPages}
onClick={() => setPage(page + 1)}
>
Next
</button>
</li>
</ul>
</nav>
)}
</div>
);
};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 });
A reference to the canvas element. Create with:
const canvasRef = useRef(null);
and then render it like:
<canvas ref={canvasRef} />
and then pass it into usePdf.
URL of the PDF file.
Allows you to specify a callback that is called when the PDF document data will be fully loaded. Callback is called with PDFDocumentProxy as an only argument.
Allows you to specify a callback that is called after an error occurred during PDF document data loading.
Allows you to specify a callback that is called when the PDF page data will be fully loaded. Callback is called with PDFPageProxy as an only argument.
Allows you to specify a callback that is called after an error occurred during PDF page data loading.
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 as an only argument.
Allows you to specify a callback that is called after an error occurred during PDF page rendering.
Specify the page that you want to display. Default = 1,
Allows you to scale the PDF. Default = 1.
Allows you to rotate the PDF. Number is in degrees. Default = 0.
Allows you to specify a cmap url. Default = '../node_modules/pdfjs-dist/cmaps/'.
Allows you to specify whether the cmaps are packed or not. Default = false.
Allows you to specify a custom pdf worker url. Default = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js'.
Allows you to add the withCredentials flag. Default = false.
pdfjs's PDFDocumentProxy object.
This can be undefined if document has not been loaded yet.
pdfjs's PDFPageProxy object
This can be undefined if page has not been loaded yet.
MIT © mikecousins
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent