@phuocng/react-pdf-viewer

A React component to view a PDF document

Downloads in past

Stats

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

Readme

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

Features

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

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

Coming soon
  • Theming
  • Darkmode

License

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

Usage

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" />
</div>
~

Commands

  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

About

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

Products

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 |