# Document Viewer
## PDF and DOCX viewer for Vanilla JavaScript and React applications
### Installation
Requires peer dependency `pdfjs-dist`:
```
npm install pdfjs-dist
```
Install the package:
```
npm install document-viewer-ts
```
### Example Usage
If using webpack, copy `PATH/TO/NODE_MODULES/pdfjs-dist/build/pdf.worker.min.js` to a local directory:
`webpack.config.ts`
```
import CopyPlugin from "copy-webpack-plugin";
...
const config = {
...
plugins: [
...
new CopyPlugin({
patterns: [
{
from: "PATH/TO/NODE_MODULES/document-viewer/dist/worker/pdf.worker.min.js",
to: "PATH/TO/WORKER/FILE"
}
]
}
]
}
...
```
#### With HTML and Vanilla JS
Call the init script in the root of your JS application using the path to your worker file.
`index.js`
```
import { init } from 'document-viewer'
init("PATH/TO/WORKER/FILE");
```
Wherever you want to include a document viewer in the HTML, include a `` with `class="viewer-container"` and `id` being some unique key (on the page) and `data-document-url` being the url of the document you want to display. Also make sure you're importing `styles.css` from the package in your HTML head.
`index.html`
```
```
### With React
Import the `Viewer` component and call it with the proper `documentId`, `documentUrl`, and `workerSrc` props. Also make sure to import `styles.css` in your app.
`index.jsx`
```
import React from 'react'
import { Viewer } from 'document-viewer'
export default () =>
```