Popularity
1.3
Growing
Activity
9.1
Growing
161
7
10

Description

- Written in TypeScript, powered by React Hooks. - Provides a lot of features such as navigation, searching, zooming, etc. - Supports layout and toolbar customization. - Supports localization. All text items can be localized in another language easily. - Theming and dark mode are coming soon.

Monthly Downloads: 0
Programming language: TypeScript
Tags: Editors     UI     TypeScript     JavaScript     Reactjs     React-component     pdf    
Latest version: v1.5.0

React PDF viewer alternatives and similar libraries

Based on the "Editors" category

Do you think we are missing an alternative of React PDF viewer or a related project?

Add another 'Editors' Library

README

React PDF viewer

A React component to view a PDF document. It's written in TypeScript, and powered by React hooks completely.

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
$ npm install @phuocng/react-pdf-viewer
$ npm install pdfjs-dist
  1. Import CSS and components
import Viewer, { Worker } from '@phuocng/react-pdf-viewer';

import '@phuocng/react-pdf-viewer/cjs/react-pdf-viewer.css';
  1. Use the component
<Worker workerUrl="https://unpkg.com/pdfjs-dist@2.2.228/build/pdf.worker.min.js">
    <div style={{ height: '750px' }}>
        <Viewer fileUrl="/path/to/document.pdf" />
    </div>
</Worker>

Commands

  1. Build:
$ npm run build

Then it will produce two formats available in the dist folder:

└─── dist
    ├─── cjs    // CommonJS package
    └─── umd    // UMD package
  1. Dev mode:
$ npm run dev

The bundler will watch the entire src folder and build the cjs package when any source file is changed.

  1. Lint:
$ npm run lint

It will check if the entire source code compatible with

About

This project is developed by Nguyen Huu Phuoc. You might be interesting in my projects:

Product Description
Blur Page A browser extension to hide sensitive information on a web page
CSS Layout A collection of popular layouts and patterns made with CSS
Fake Numbers Generate fake and valid numbers
Form Validation The best validation library for JavaScript
HTML DOM How to manage HTML DOM with vanilla JavaScript
React PDF Viewer A React component to view a PDF document


*Note that all licence references and agreements mentioned in the React PDF viewer README section above are relevant to that project's source code only.