A React component to view a PDF document

Downloads in past


1,2631041.7.02 years ago3 years agoMinified + gzip package size for @phuocng/react-pdf-viewer in KB


React PDF viewer
A React component to view a PDF document. It's written in TypeScript, and powered by React hooks completely.
~ javascript import Viewer from '@phuocng/react-pdf-viewer'; ~
React PDF viewer


Basic features
  • x Support password protected document
  • x Zooming: Support custom levels such as actual size, page fit, and page width
  • x Navigation between pages
  • x Can go to the first and last pages quickly
  • x Search for text
  • x Preview page thumbnails
  • x View and navigate the table of contents
  • x List and download attachments
  • x Rotating
  • x Text selection and hand tool modes
  • x Different scrolling modes
  • x Full screen mode
  • x Can open a file from local. Users can drag and drop a local file to view it
  • x Download file
  • x View the document properties
  • x Support SSR
  • x Print

  • x The toolbar can be customized easily
  • x All text items can be localized in another language

Coming soon
  • Theming
  • Darkmode


You have to purchase a Commercial License at the official website.


Perform the following steps to have the simplest example. For more demos, please look at the demo folder.
  1. Install packages

~ console $ npm install pdfjs-dist@2.4.456 $ npm install @phuocng/react-pdf-viewer ~
  1. Import CSS and components

~ javascript import Viewer, { Worker } from '@phuocng/react-pdf-viewer';
import '@phuocng/react-pdf-viewer/cjs/react-pdf-viewer.css';
  1. Use the component

~ javascript
<div style={{ height: '750px' }}>
    <Viewer fileUrl="/path/to/document.pdf" />


  1. Build:

~ console $ npm run build ~
Then it will produce two formats available in the dist folder:
~ └─── dist
├─── cjs    // CommonJS package
└─── umd    // UMD package
  1. Dev mode:

~ console $ npm run dev ~
The bundler will watch the entire src folder and build the cjs package when any source file is changed.
  1. Lint:

~ console $ npm run lint ~
It will check if the entire source code compatible with


This project is developed by Nguyen Huu Phuoc. I love building products and sharing knowledge.
Be my friend on


You might be interested in my products:
| Product | Description | |-------------------------------------------------------|-------------------------------------------------------------------| | 01. 1 LOC | Favorite JavaScript utilities in single line of code | | 02. Blur Page | A browser extension to hide sensitive information on a web page | | 03. CSS Layout | A collection of popular layouts and patterns made with CSS | | 04. Fake Numbers | Generate fake and valid numbers | | 05. Form Validation | The best validation library for JavaScript | | 06. HTML DOM | How to manage HTML DOM with vanilla JavaScript | | 07. React PDF Viewer | A React component to view a PDF document |