JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2
  • Score
    100M100P100Q36854F
  • License MIT

React wrapper for pdfjs with multiple file support

Package Exports

  • react-pdfjs-multi

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-pdfjs-multi) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-pdfjs-multi

Build Status David Dependencies

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:

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

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',
];

class MultiViewerExample extends PureComponent {
  render() {
    return <PdfMultiViewer pdfs={pdfFiles} />;
  }
}

export default MultiViewerExample;

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
startIndex 0 {number} first pdf to load using array index

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