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

// 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

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

Customization

<input checked="" disabled="" type="checkbox"> The toolbar can be customized easily
<input checked="" disabled="" type="checkbox"> 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

Package detail

@react-pdf-viewer/core

readme

React PDF viewer

Features

License

About