https://github.com/lukasmoellerch/pdf-viewport
A library that makes using pdfjs in react projects easy.
https://github.com/lukasmoellerch/pdf-viewport
pdf pdfjs react reactjs
Last synced: 25 days ago
JSON representation
A library that makes using pdfjs in react projects easy.
- Host: GitHub
- URL: https://github.com/lukasmoellerch/pdf-viewport
- Owner: lukasmoellerch
- License: mit
- Created: 2021-02-07T00:27:50.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-09-10T09:44:54.000Z (over 3 years ago)
- Last Synced: 2025-03-29T22:42:37.653Z (about 2 months ago)
- Topics: pdf, pdfjs, react, reactjs
- Language: TypeScript
- Homepage: https://pdf-viewport.lukas-moeller.ch
- Size: 1.48 MB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
pdf-viewport
A library that makes using pdfjs in react projects easy.
Demo: pdf-viewport.lukas-moeller.ch
# Getting Started
Add `pdfjs-dist` and `pdf-viewport` as dependencies:
```bash
$ yarn add pdfjs-dist pdf-viewport
$ npm install --save pdfjs-dist pdf-viewport
```
Set `pdfjsLib.GlobalWorkerOptions.workerSrc`. You could for example use a hosted variant of the worker or use `worker-loader` to bundle the worker yourself using webpack.
```ts
import * as pdfjsLib from "pdfjs-dist/es5/build/pdf";
pdfjsLib.GlobalWorkerOptions.workerSrc = "[your worker url]"
```
Load the PDF using `getDocument` from pdfjs. You can do this e.g. using `useEffect` or react-query:
```ts
const [pdf, setPdf] = React.useState();
React.useEffect(() => {
getDocument(examplePdf).promise.then(setPdf);
}, []);
```
Now you can use `pdf-viewport` to render the PDF using one of its components:
```tsx
```
## Reference
Coming soon!