Gathering detailed insights and metrics for @mikecousins/react-pdf
Gathering detailed insights and metrics for @mikecousins/react-pdf
Gathering detailed insights and metrics for @mikecousins/react-pdf
Gathering detailed insights and metrics for @mikecousins/react-pdf
npm install @mikecousins/react-pdf
Typescript
Module System
Node Version
NPM Version
TypeScript (90.53%)
JavaScript (7.05%)
CSS (2.04%)
HTML (0.37%)
Total Downloads
1,698,707
Last Day
272
Last Week
9,453
Last Month
53,675
Last Year
514,516
MIT License
779 Stars
587 Commits
151 Forks
13 Watchers
14 Branches
29 Contributors
Updated on Jul 05, 2025
Minified
Minified + Gzipped
Latest Version
8.0.1
Package Id
@mikecousins/react-pdf@8.0.1
Unpacked Size
17.79 kB
Size
3.98 kB
File Count
6
NPM Version
10.9.2
Node Version
23.10.0
Published on
Mar 28, 2025
Cumulative downloads
Total Downloads
Last Day
-15.8%
272
Compared to previous day
Last Week
-12.5%
9,453
Compared to previous week
Last Month
-24.8%
53,675
Compared to previous month
Last Year
51.6%
514,516
Compared to previous year
react-pdf-js
provides a component for rendering PDF documents using PDF.js.
Install with pnpm add @mikecousins/react-pdf pdfjs-dist
, yarn add @mikecousins/react-pdf pdfjs-dist
or npm install @mikecousins/react-pdf pdfjs-dist
usePdf
hookUse the hook in your app (showing some basic pagination as well):
1import React, { useState, useRef } from 'react'; 2import { usePdf } from '@mikecousins/react-pdf'; 3 4const MyPdfViewer = () => { 5 const [page, setPage] = useState(1); 6 const canvasRef = useRef(null); 7 8 const { pdfDocument, pdfPage } = usePdf({ 9 file: 'test.pdf', 10 page, 11 canvasRef, 12 }); 13 14 return ( 15 <div> 16 {!pdfDocument && <span>Loading...</span>} 17 <canvas ref={canvasRef} /> 18 {Boolean(pdfDocument && pdfDocument.numPages) && ( 19 <nav> 20 <ul className="pager"> 21 <li className="previous"> 22 <button disabled={page === 1} onClick={() => setPage(page - 1)}> 23 Previous 24 </button> 25 </li> 26 <li className="next"> 27 <button 28 disabled={page === pdfDocument.numPages} 29 onClick={() => setPage(page + 1)} 30 > 31 Next 32 </button> 33 </li> 34 </ul> 35 </nav> 36 )} 37 </div> 38 ); 39};
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
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
SAST tool is run on all commits
Details
Reason
5 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 4
Reason
7 existing vulnerabilities detected
Details
Reason
Found 0/24 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
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Score
Last Scanned on 2025-06-30
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