A library that makes using pdfjs in react projects easy.

Last update: Feb 5, 2022

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:

$ 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.

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:

const [pdf, setPdf] = React.useState<PDFDocumentProxy | undefined>();
React.useEffect(() => {
  getDocument(examplePdf).promise.then(setPdf);
}, []);

Now you can use pdf-viewport to render the PDF using one of its components:

<PdfViewport
  aspectRatio={portraitA4}
  pdf={pdf}
  pageNumber={1}
>
  <PdfCanvasLayer />
</PdfViewport>

Reference

Coming soon!

GitHub

https://github.com/lukasmoellerch/pdf-viewport
You might also like...

:speech_balloon: Easy way to create conversation chats

:speech_balloon: Easy way to create conversation chats

React Simple Chatbot A simple chatbot component to create conversation chats Getting Start npm install react-simple-chatbot --save Usage There are sev

Jul 31, 2022

Jed Saylor minting dapp is a quick and easy way to connect your smart contract and start minting NFTs.

Jed Saylor minting dapp is a quick and easy way to connect your smart contract and start minting NFTs.

Welcome to Jed Saylor 👾 All the code in these repos was created and explained by Jed Saylor on his course. To find help please visit: 📺 Instagram Je

Nov 26, 2021

A javascript framework to share url to social media sites like facebook, twitter, reddit, whastapp in an easy and simple way.

simple-sharer [by BUILDBROTHERS.COM] A javascript framework to share url to social media sites like facebook, twitter, reddit, whastapp in an easy and

May 29, 2022

Easy to use editor for crontab schedules.

Cron Expression Generator Easy to use editor for crontab schedules. Development Setup Prerequisites Node.js (recommended version: 16+) Package Manager

Sep 10, 2021

A React library to show an administrative UI for the Mock Service Worker JS library

A React library to show an administrative UI for the Mock Service Worker JS library

A React library to show an administrative UI for the Mock Service Worker JS library

May 27, 2022

In this demo, I am using a library created by me, called 'aesthetic-state' for global state managment in React

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Oct 21, 2021

An algebraic effects library for javascript and typescript using generators

Algebraify Algebraic Effects Are Here! (sort of) (If you're unfamiliar with algebraic effects, here's a great article: Algebraic Effects for the Rest

Jul 3, 2022

Authentication library for the browser environment using Web Crypto API

Authentication Library for the Web A collection of utility functions for working with Web Crypto API.

Jun 29, 2022

React Arts is a library of react functional component which provides canvas sketch board in the app.

React Arts is a library of react functional component which provides canvas sketch board in the app.

🎨 React Arts React Arts is a library of react functional component which provides canvas sketch board in the app. This library contains two react com

Jun 4, 2022
An interactive CLI automation tool 🛠️ for creating react.js and next.js projects most fast and efficiently. ⚛️
An interactive CLI automation tool 🛠️ for creating react.js and next.js projects most fast and efficiently. ⚛️

An interactive CLI automation tool ??️ for creating react.js and next.js projects most fast and efficiently. ⚛️

Apr 12, 2022
This is my Portfolio built with React. The app shows information about me, my projects, resume.
This is my Portfolio built with React. The app shows information about me, my projects, resume.

Elyor Doniyorov Built With React.js Live demo Netlify Live link Getting Started To get a local copy run the following steps: Copy this link https://gi

Jan 21, 2022
✉️ Display e-mails in your React.js projects. (Targets Gmail rendering.)
✉️ Display e-mails in your React.js projects. (Targets Gmail rendering.)

react-letter is a React.js component that allows for an easy display of HTML e-mail content with automatic sanitization. Support for features should m

Jul 27, 2022
This project is collection of large projects's source code (codebases), built with Reactjs. Eg: Bestbuy, Postman, Trello, Udacity, Coursera, Skillshare, Invision, Intercom, Pipedrive, ... and more.
This project is collection of large projects's source code (codebases), built with Reactjs. Eg: Bestbuy, Postman, Trello, Udacity, Coursera, Skillshare, Invision, Intercom, Pipedrive, ... and more.

This project is collection of large projects's source code (codebases), built with Reactjs. Eg: Bestbuy, Postman, Trello, Udacity, Coursera, Skillshare, Invision, Intercom, Pipedrive, ... and more.

Aug 5, 2022
Automatically finds jQuery methods from existing projects and generates vanilla js alternatives.

Automatically find jQuery methods from existing projects and generate vanilla js alternatives.

Jul 29, 2022
ReactJs Advanced Projects

ReactJs-Advanced-Projects Tech We Used ReactJs Firebase Hosting Firebase Auth Firebase Storage React-Dom React Redux Steps to run in your machine Run

Jun 8, 2022
🕹 GBA emulator on your React project - easy and powerful to use!
🕹 GBA emulator on your React project - easy and powerful to use!

react-gbajs GBA emulator on your React project - easy and powerful to use! Just three steps to set it up ✨ 1 - Apply GbaProvider import { GbaProvider

Jul 26, 2022
An easy way to build Rarity games with React

rarity-react An easy way to build Rarity games with React. It started with a simple app... I wanted to see my summoners and the prizes they'd won whil

Jan 13, 2022
Very quick and easy integration of the Potree Viewer in React

Very quick and easy integration of the Potree Viewer in React

Jul 21, 2022
Just a small collection of hooks that make it easy to integrate React Query into a REST API

react-query-restful is just a small collection of hooks that make it easy to integrate React Query into a REST API.

May 7, 2022