react-pdf-viewer

Demo

Demo version Work in fetal stage.

Usage

$ git clone https://github.com/VicStor/react-pdf-viewer

$ cd react-pdf-viewer

$ npm install

$ npm start

go to http://localhost:4040/ in your browser

Should work like that

import React, { Component } from 'react';
import PdfViewer from 'react-pdf-viewer';

class App extends Component {
  constructor() {
    super();
    this.state = {
      loadingProgress: 0,
    };
  }
  getViewer = (pdfViewer) => {
    this.pdfViewer = pdfViewer;
    pdfViewer.onLoadingProgress((progress) => {
      const loadingProgress = Math.floor((100 * progress.loaded) / progress.total);
      this.setState({ loadingProgress });
    });
  }
  render() {
    return (
      <App>
        <PdfViewer
          getPdfViewer={this.getViewer}
          docLink='link to pdfDocument'
        />
      </App>
    );
  }
}

pdfViewer

Component

There are props to be pass to Component as chown below if svg prop set to true page renders as svg, otherwise it renders in canvas

render() {
  return (
    <PdfViewer
      getPdfViewer={this.getViewer}
      docLink='link to pdfDocument'
      //svg
    />
  );
}

getPdfViewer

Example of function shown below. Here this.pdfViewer is set to pdfViewer so you can use this object and its methods everywhere in your component.

getViewer = (pdfViewer) => {
  this.pdfViewer = pdfViewer;
  pdfViewer.onLoadingProgress((progress) => {
    const loadingProgress = Math.floor((100 * progress.loaded) / progress.total);
    this.setState({ loadingProgress });
  });
}

docLink

uri of pdf document

this.pdfViewer.switchViewMode(viewMode);
this.pdfViewer.currentPage();
this.pdfViewer.showThumbnails(true || false);
this.pdfViewer.onLoadingProgress((progress) => {...});
// and others

Instance

Think of pdfViewer as actual instance of pdfDocument. So

this.pdfViewer.onLoad((pdfDocument) => {})

is the same as

this.pdfViewer.pdfDocument.onLoad(() => {})

and

this.pdfViewer.onPageLoad((page) => {...});

is the same as

this.pdfViewer.pdfDocument.onPageLoad((page) => {...});

Styling

There are some instances need to be styled

• document container
• page container
• page number
• thumbnails container
• thumbnail
• bookmarks container
• bookmark