Nonsense Placement Mandatory

    @phuocng/react-pdf-viewer
    TypeScript icon, indicating that this package has built-in type declarations

    1.7.0 • Public • Published

    React PDF viewer

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

    import Viewer from '@phuocng/react-pdf-viewer';
    <Viewer fileUrl='/path/to/file.pdf' />

    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 pdfjs-dist@2.4.456
    $ npm install @phuocng/react-pdf-viewer
    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.4.456/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. 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

    Install

    npm i @phuocng/react-pdf-viewer

    DownloadsWeekly Downloads

    3,572

    Version

    1.7.0

    License

    https://react-pdf-viewer.dev/license

    Unpacked Size

    619 kB

    Total Files

    12

    Last publish

    Collaborators

    • phuoc-ng