react-pdfjs-multi

React wrapper for pdfjs with multiple file support.

This library uses pdf.js.

For a preview of the current development visit github pages.

What does in development mean:

1. MINOR versions represent breaking changes
2. PATCH versions represent fixes and features
3. There are no deprecation warnings between releases

Installation & Usage

yarn add react-pdfjs-multi

or

npm i react-pdfjs-multi

Example Usage MultiViewer:

import React from 'react';
import { PdfMultiViewer } from 'react-pdfjs-multi';
import 'react-pdfjs-multi/dist/react-pdfjs-multi.css';

const MultiViewerExample = () => {
  const pdfFiles = [
    'pdfs/test-pdf-a.pdf',
    {
      title:
        'Trace-based Just-in-Time Type Specialization for DynamicLanguages',
      source: 'pdfs/compressed.tracemonkey-pldi-09.pdf',
    },
    'pdfs/test-pdf-b.pdf',
    'pdfs/test-pdf-c.pdf',
  ];

  return (
    <PdfMultiViewer
      pdfs={pdfFiles}
      i18nData={{
        download: 'Herunterladen',
        scaleDown: 'Verkleinern',
        scaleUp: 'Vergrößern',
        originalSize: 'Originalgröße',
        pages: 'Seiten',
        zoom: 'Automatischer Zoom',
      }}
    />
  );
};

export default MultiViewerExample;

Example Usage Renderer (Typescript)

import React, { FC, useState, useEffect } from 'react';
import { PdfRenderer, PdfjsLib, PDFDocumentProxy } from 'react-pdfjs-multi';

PdfjsLib.GlobalWorkerOptions.workerSrc =
  '//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.worker.js';

const RendererExample: FC = () => {
  const [pdfDoc, setPdfDoc] = useState<PDFDocumentProxy>();

  useEffect(() => {
    const getPdfDoc = async () => {
      const doc = await PdfjsLib.getDocument({
        url: 'pdfs/compressed.tracemonkey-pldi-09.pdf',
      }).promise;

      setPdfDoc(doc);
    };

    getPdfDoc();
  }, []);

  if (!pdfDoc) return null;

  return <PdfRenderer pdfDoc={pdfDoc} downloadBtn={false} />;
};

export default RendererExample;

PdfMultiViewer

The MultiViewer allows you to pass an array of source strings or an object definition and it then loads all PDF's async and shows the renderer as soon as the first PDF is loaded.

Props:

| Name | Required | Default | Type | Description | | ---------- | -------- | ------- | ---------- | -------------------------------------------------------------- | | pdfs | true | | {array} | An array of strings or objects | | autoZoom | | true | {boolean} | enables/disables autoZoom on component mount and window resize | | controls | | true | {boolean} | enables/disables controls to e.g. change renderer zoom | | i18nData | | {}* | {I18nData} | An object of translated strings, default language is en | | startIndex | | 0 | {number} | first pdf to load using array index |

i18n

To be able to use different i18n libraries eg. i18next or react-intl you can pass an i18n object with translated strings to the component.

*defaults:

{
  // Viewer
  pages: 'Pages',
  // Renderer
  zoom: 'Automatic zoom',
  originalSize: 'Original size',
  rotateLeft: 'Rotate left',
  rotateRight: 'Rotate right',
  scaleUp: 'Scale up',
  scaleDown: 'Scale down',
  download: 'Download',
}

PdfRenderer

If you like to implement your own custom multi renderer logic you can use the PdfRenderer component. For an implementation example see Example.

Props:

| Name | Required | Default | Type | Description | | ------------- | -------- | ------- | ------------------ | -------------------------------------------------------------- | | pdfDoc | true | | {PDFDocumentProxy} | A proxy of the pdf document to display | | autoZoom | | true | {boolean} | enables/disables autoZoom on component mount and window resize | | controls | | true | {boolean} | enables/disables controls to e.g. change renderer zoom | | downloadBtn | | true | {boolean} | enables/disables download button | | i18nData | | {}* | {I18nDataRenderer} | An object of translated strings, default language is en | | zoom | | null | {number} | Initial Zoom | | rotation | | null | {number} | Initial Rotation | | scrollTop | | null | {number} | Initial ScrollTop | | scrollLeft | | null | {number} | Initial ScrollLeft | | activeIndex | | null | {number} | Is required whenn the pdfChangeHook is used | | pdfChangeHook | | null | {func} | Callback function which gets a position object |