vlx-react-pdf

React PDF viewer

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

1. Install packages

$ npm install pdfjs-dist@2.5.207
$ npm install vlx-react-pdf

2. Import CSS and components

import Viewer, { Worker } from 'vlx-react-pdf';
import 'vlx-react-pdf/cjs/react-pdf-viewer.css';

3. Use the component

<Worker workerUrl="https://unpkg.com/pdfjs-dist@2.5.207/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

2. Dev mode:

$ npm run dev

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

3. Lint:

$ npm run lint

It will check if the entire source code compatible with

• ESLint
• eslint-plugin-react
• typescript-eslint