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
• Print
• Theming
• Dark mode
• Accessibility

Customization

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

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

• Twitter
• dev.to
• Github

Products

You might be interested in my products:

Products

• Blur Page - A browser extension to hide sensitive information on a web page
• Check Browsers Support - A browser extension to check browser compatibility without leaving your tab
• Fake Numbers - Generate fake and valid numbers
• Form Validation - The best validation library for JavaScript
• IntersectionObserver Examples - Practical, real world examples of IntersectionObserver
• React PDF Viewer - A React component to view a PDF document

Resources

• 1LOC - Favorite JavaScript utilities in single line of code
• CSS Layout - A collection of popular layouts and patterns made with CSS
• HTML DOM - How to manage HTML DOM with vanilla JavaScript
• Responsive Design Patterns - A collection of patterns to create a responsive web page
• Super tiny, quick tips, tricks and best practices of front-end development
• this VS that - The differences between _ and _ in the front-end development