# pdfjs-viewer-react

> This node package is for rendering PDF using PDF.JS

Latest version **2.0.943** (published 2019-01-07) · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.943 |
| Published | 2019-01-07 |
| First published | 2019-01-07 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 9.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | sharanappa |

## Links

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

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.4.2
- [webpack](https://npm.io/package/webpack.md) ^4.17.1

## Recent versions

- 2.0.943 (latest) — 2019-01-07

## README

# pdfjs-viewer

Display PDFs in your React app as easily as if they were images.

## tl;dr
* Install by executing `npm install pdfjs-viewer` or `yarn add pdfjs-viewer`.
* Import by adding `import PdfViewer from 'pdfjs-viewer'`.
* Use by adding `<PdfViewer file="..." width="..." height="..." />`. `file` can be a URL or your pdf file path

## Getting started

### Installation

Add pdfjs-viewer to your project by executing `npm install pdfjs-viewer` or `yarn add pdfjs-viewer`.

### Usage

Here's an example of basic usage:

```js
import React,{ Component } from 'react';
import PropTypes from 'prop-types';
import PdfViewer from 'pdfjs-viewer';

export default class PdfComponent extends Component { 
	
  static propTypes = {
	 /**
	  *URL for fetching the component 
	  */
    pdfUrl:PropTypes.string
  };
  constructor (props) {
    super (props);
  }
  render() {

	return (
	  <PdfViewer file={this.props.pdfUrl} width="100%" height="532px"></PdfViewer>
	)
  }
}
```

Import and add below plugin code in "webpack.doc.display.prod.js" file


```js
const CopyWebpackPlugin = require('copy-webpack-plugin');

new CopyWebpackPlugin([ 
    	{ from: 'node_modules/pdf-js/public/pdfjs', to: 'pdfjs' },
    	{ from: 'node_modules/pdf-js/public/pdfjs', to: 'public/pdfjs' }
	])
   ]
```

Import and add below plugin code in "webpack.doc.display.dev.js" file

```js
const CopyWebpackPlugin = require('copy-webpack-plugin');

new CopyWebpackPlugin([
        {
          from: 'node_modules/pdf-js/public/pdfjs',
          to: 'hpesc/pdfjs',
          toType: 'dir'
        }
      ])
```

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