react-pdf-js

react-pdf-js provides a component for rendering PDF documents using PDF.js.

Usage

Install with yarn add @mikecousins/react-pdf or npm install @mikecousins/react-pdf

Use it in your app (showing some basic pagination as well):

import React, { useState, useEffect, useRef } from 'react';
import { usePdf } from '@mikecousins/react-pdf';

const MyPdfViewer = () => {
  const [page, setPage] = useState(1);
  const [pages, setPages] = useState(null);

  const renderPagination = (page, pages) => {
    if (!pages) {
      return null;
    }
    let previousButton = (
      <li className="previous" onClick={() => setPage(page - 1)}>
        <a href="#">
          <i className="fa fa-arrow-left"></i> Previous
        </a>
      </li>
    );
    if (page === 1) {
      previousButton = (
        <li className="previous disabled">
          <a href="#">
            <i className="fa fa-arrow-left"></i> Previous
          </a>
        </li>
      );
    }
    let nextButton = (
      <li className="next" onClick={() => setPage(page + 1)}>
        <a href="#">
          Next <i className="fa fa-arrow-right"></i>
        </a>
      </li>
    );
    if (page === pages) {
      nextButton = (
        <li className="next disabled">
          <a href="#">
            Next <i className="fa fa-arrow-right"></i>
          </a>
        </li>
      );
    }
    return (
      <nav>
        <ul className="pager">
          {previousButton}
          {nextButton}
        </ul>
      </nav>
    );
  };

  const canvasEl = useRef(null);

  const [loading, numPages] = usePdf({
    file: 'test.pdf',
    onDocumentComplete,
    page,
    canvasEl,
  });

  useEffect(() => {
    setPages(numPages);
  }, [numPages]);

  return (
    <div>
      {loading && <span>Loading...</span>}
      <canvas ref={canvasEl} />
      {renderPagination(page, pages)}
    </div>
  );
};

export default MyPdfViewer;

Props

When you call usePdf you'll want to pass in a subset of these props, like this:

const [loading, numPages] = usePdf({ canvasEl, file: 'https://example.com/test.pdf', page });

canvasEl

A reference to the canvas element. Create with:

const canvasEl = useRef(null);

and then render it like:

<canvas ref={canvasEl} />

and then pass it into usePdf.

file

URL of the PDF file.

onPageLoaded

Allows you to specify a callback that is called when the PDF page will be fully loaded into the DOM.

page

Specify the page that you want to display. Default = 1,

scale

Allows you to scale the PDF. Default = 1.

rotate

Allows you to rotate the PDF. Number is in degrees. Default = 0.

cMapUrl

Allows you to specify a cmap url. Default = '../node_modules/pdfjs-dist/cmaps/'.

cMapPacked

Allows you to specify whether the cmaps are packed or not. Default = false.

workerSrc

Allows you to specify a custom pdf worker url. Default = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf.worker.js'.

withCredentials

Allows you to add the withCredentials flag. Default = false.

A React component to wrap PDF.js