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: about 1 month 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 8 years ago)
• Default Branch: main
• Last Pushed: 2024-05-07T11:18:40.000Z (about 2 months ago)
• Last Synced: 2024-05-14T05:44:06.686Z (about 1 month ago)
• Topics: es6, es6-javascript, pdf, pdf-viewer, react, reactjs, tsup, typescript, vite
• Language: TypeScript
• Homepage: https://react-pdf.cousins.ai
• Size: 14 MB
• Stars: 692
• Watchers: 13
• Forks: 146
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Lists

• awesome-frontend - @mikecousins/react-pdf - A React component to wrap PDF.js.  (Repository / Office)

README

        
# react-pdf-js

`react-pdf-js` provides a component for rendering PDF documents using [PDF.js](http://mozilla.github.io/pdf.js/).

---

[![NPM Version](https://img.shields.io/npm/v/@mikecousins/react-pdf.svg?style=flat-square)](https://www.npmjs.com/package/@mikecousins/react-pdf)

[![NPM Downloads](https://img.shields.io/npm/dm/@mikecousins/react-pdf.svg?style=flat-square)](https://www.npmjs.com/package/@mikecousins/react-pdf)

[![codecov](https://codecov.io/gh/mikecousins/react-pdf-js/branch/master/graph/badge.svg)](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)