react-pdf-js
react-pdf-js
provides a component for rendering PDF documents using PDF.js.
Demo
Usage
Install with yarn add @mikecousins/react-pdf
or npm install @mikecousins/react-pdf
Use it in your app (showing some basic pagination as well):
import React, { useState, useEffect, useRef } from 'react';
import { usePdf } from '@mikecousins/react-pdf';
const MyPdfViewer = () => {
const [page, setPage] = useState(1);
const [pages, setPages] = useState(null);
const renderPagination = (page, pages) => {
if (!pages) {
return null;
}
let previousButton = (
<li className="previous" onClick={() => setPage(page - 1)}>
<a href="#">
<i className="fa fa-arrow-left"></i> Previous
</a>
</li>
);
if (page === 1) {
previousButton = (
<li className="previous disabled">
<a href="#">
<i className="fa fa-arrow-left"></i> Previous
</a>
</li>
);
}
let nextButton = (
<li className="next" onClick={() => setPage(page + 1)}>
<a href="#">
Next <i className="fa fa-arrow-right"></i>
</a>
</li>
);
if (page === pages) {
nextButton = (
<li className="next disabled">
<a href="#">
Next <i className="fa fa-arrow-right"></i>
</a>
</li>
);
}
return (
<nav>
<ul className="pager">
{previousButton}
{nextButton}
</ul>
</nav>
);
};
const canvasEl = useRef(null);
const [loading, numPages] = usePdf({
file: 'test.pdf',
onDocumentComplete,
page,
canvasEl,
});
useEffect(() => {
setPages(numPages);
}, [numPages]);
return (
<div>
{loading && <span>Loading...</span>}
<canvas ref={canvasEl} />
{renderPagination(page, pages)}
</div>
);
};
export default MyPdfViewer;
Props
When you call usePdf you'll want to pass in a subset of these props, like this:
const [loading, numPages] = usePdf({ canvasEl, file: 'https://example.com/test.pdf', page });
canvasEl
A reference to the canvas element. Create with:
const canvasEl = useRef(null);
and then render it like:
<canvas ref={canvasEl} />
and then pass it into usePdf.
file
URL of the PDF file.
onPageLoaded
Allows you to specify a callback that is called when the PDF page will be fully loaded into the DOM.
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/2.1.266/pdf.worker.js'.
withCredentials
Allows you to add the withCredentials flag. Default = false.
License
MIT © mikecousins