react-pdf-js
react-pdf-js
provides a component for rendering PDF documents using PDF.js.
Demo
Usage
Install with yarn add react-pdf-js
or npm install react-pdf-js
Use it in your app (showing some basic pagination as well):
;; const MyPdfViewer = { const page setPage = ; const pages setPages = ; const renderPagination = { if !pages return null; let previousButton = <li className="previous" onClick= ><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= ><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 = ; const loading numPages = ; ; return <div> loading && <span>Loading...</span> <canvas ref=canvasEl /> </div> ;} ;
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.
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.
Known Issues
When using Create React App 3.0 you'll get some warnings about:
./node_modules/pdfjs-dist/build/pdf.js Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
Issues have been logged with create-react-app and pdf.js about this issue.
License
MIT © mikecousins