# pdfjs-react-frame

> This is a wrapper for using Mozilla's PDF.js in a React component. https://github.com/mozilla/pdf.js/

Latest version **0.1.1** (published 2019-08-21) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install pdfjs-react-frame
pnpm add pdfjs-react-frame
yarn add pdfjs-react-frame
bun add pdfjs-react-frame
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2019-08-21 |
| First published | 2019-05-16 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 2.5 MB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| Author | Chris Shaffer |
| Maintainers | drshaffopolis |

## Links

- npm: https://www.npmjs.com/package/pdfjs-react-frame
- npm.io page: https://npm.io/package/pdfjs-react-frame

## Dependencies (4)

- [uuid](https://npm.io/package/uuid.md) ^3.3.2
- [react](https://npm.io/package/react.md) ^16.6.0
- [webpack](https://npm.io/package/webpack.md) ^2.6.1
- [pdfjs-dist](https://npm.io/package/pdfjs-dist.md) 2.1.266

## Recent versions

- 0.1.1 (latest) — 2019-08-21
- 0.1.0 — 2019-05-16
- 0.0.2 — 2019-05-16
- 0.0.1 — 2019-05-16

## README

## Overview

This is a wrapper for using Mozilla's PDF.js in a React component. https://github.com/mozilla/pdf.js/

There are a few other examples out there ( this one was particularly useful: https://github.com/seges/react-pdfjs-example )

This builds on those by adding a few abilities:  

1.  The text layer - for selectable/searchable text  
2.  The ability to scroll to a specific page (or to determine which page the user has already scrolled to)  

---

## Usage

```
import PdfJsFrame from 'pdfjs-react-frame';

<PdfJsFrame
	style={/* optional style object */}
	url={/* URL of a document to fetch - this is required if data is null */}
	data={/* A document to display as an arrayBuffer - this is required if URL is null */}
	pageNumber={/* The page to scroll to (default: 1) */}
	onPageChange={/* optional function to handle page changes, (pageNumber) => { } */}
	workerPath=/* optional (default: Mozilla GitHub) path to serve the worker file locally '/pdf.worker.min.js' */
	loadingElement={/* optional, e.g. <CircularProgress/> */}
/>
```

https://developer.mozilla.org/en-US/docs/Web/API/Body/arrayBuffer

---

## Serve Worker.js Locally

This is a bit of a hold-over from the fact that the library isn't really designed for React.
I couldn't think of a better way to do this without a fairly big rewrite to PDF.js...

In order to use this, you'll also need to ensure that the file is available and served from your application, e.g. by adding this to your package.json
```
"postinstall": "echo D|xcopy node_modules\\pdfjs-dist\\build\\pdf.worker.min.js public /sy"
```

---
_Source: https://npm.io/package/pdfjs-react-frame · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._