React PDF viewer
A React component to view a PDF document. It's written in TypeScript, and powered by React hooks completely.
// Core viewer
import { Viewer } from '@react-pdf-viewer/core';
// Plugins
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
// Import styles
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';
// Create new plugin instance
const defaultLayoutPluginInstance = defaultLayoutPlugin();
<Viewer
fileUrl='/assets/pdf-open-parameters.pdf'
plugins={[
// Register plugins
defaultLayoutPluginInstance,
...
]}
/>
Features
Basic features
- Support password protected document
- Zooming: Support custom levels such as actual size, page fit, and page width
- Navigation between pages
- Can go to the first and last pages quickly
- Search for text
- Preview page thumbnails
- View and navigate the table of contents
- List and download attachments
- Rotating
- Text selection and hand tool modes
- Different scrolling modes
- Full screen mode
- Can open a file from local. Users can drag and drop a local file to view it
- Download file
- View the document properties
- Support SSR
Customization
- The toolbar can be customized easily
- 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.
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:
1 LOC (3.3k★)Favorite JavaScript utilities in single line of code |
Blur PageA browser extension to hide sensitive information on a web page |
Check Browsers SupportA browser extension to check browser compatibility without leaving your tab |
CSS Layout (2.7k★)A collection of popular layouts and patterns made with CSS |
Fake NumbersGenerate fake and valid numbers |
Form ValidationThe best validation library for JavaScript |
HTML DOM (3.1k★)How to manage HTML DOM with vanilla JavaScript |
React PDF ViewerA React component to view a PDF document |
this VS thatThe differences between ___ and ___ in the front-end development |