How to use react-pdf - 10 common examples

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'semantic-ui-css/semantic.min.css'
import { pdfjs } from 'react-pdf';
import * as serviceWorker from './serviceWorker';

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

ReactDOM.render(, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

import { ActionCreators } from '../../actions/actionTypes';
import { AUTH_LEVEL, blockUnverifiedUser } from '../../helpers/checkAuthDialog';
import EnvChecker from '../../helpers/envChecker';
import RelatedPapers from '../relatedPapers';
import AfterDownloadContents from './component/afterDownloadContents';
import { PDFViewerProps } from './types';
import { AppState } from '../../reducers';
import ProgressSpinner from './component/progressSpinner';
import BlurBlocker from './component/blurBlocker';
import { addPaperToRecommendPool } from '../recommendPool/actions';
import { PDFViewerState } from '../../reducers/pdfViewer';
import { getBestPdf } from '../../actions/pdfViewer';
const useStyles = require('isomorphic-style-loader/useStyles');
const styles = require('./pdfViewer.scss');

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

const DIRECT_PDF_PATH_PREFIX = 'https://asset-pdf.scinapse.io/';

function trackClickButton(actionTag: Scinapse.ActionTicket.ActionTagType, paperId: string) {
  ActionTicketManager.trackTicket({
    pageType: 'paperShow',
    actionType: 'fire',
    actionArea: 'pdfViewer',
    actionTag,
    actionLabel: String(paperId),
  });
}

function getDirectPDFPath(path: string) {
  return `${DIRECT_PDF_PATH_PREFIX + path}`;
}

import {  
    listFiles,
    getFile,
    putFile,
    deleteFile
} from 'blockstack'
import { pdfjs } from 'react-pdf'
pdfjs.GlobalWorkerOptions.workerSrc = `/pdf.worker.min.js`

const metadataFilePrefix = "metadata__"
const filePrefix = "file__"
const highlightsFilePrefix = "highlights__"
const firstPageFilePrefix = "firstpage__"

export default class FileManager {
    static create (name, size, type, lastModified, arrayBuffer) {
        return new Promise(function (resolve, reject) {
            var simpleName = name
            name = FileManager._getFileName(name)
            var metadataFileName = metadataFilePrefix + name
            var fileName = filePrefix + name
            var firstPageFileName = firstPageFilePrefix + name
            var content = FileManager._getFileUrl(arrayBuffer, type)
            pdfjs.disableWorker = true

import React, {useState} from 'react';
import {withStyles, Button, Dialog} from '@material-ui/core';
import {Document, Page, pdfjs} from 'react-pdf';
import nhantran from './nhantran.pdf'

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

const style = {
    root : {
        position: 'absolute',
        bottom: '25px',
        right: '100px',
    },
    link: {
        textDecoration: "none",
        color: "white",
        marginTop: '-35px'
    },
}

const Resume = (props) => {
    const [modalOpen, setModalOpen] = useState(false);

import * as React from "react";
import * as ReactPDF from "react-pdf";
import Pagination from "react-js-pagination";
import {
  Spinner,
  Intent,
  NonIdealState,
} from "@blueprintjs/core";
import Toast from "./toast";

ReactPDF.pdfjs.GlobalWorkerOptions.workerSrc = "../dist/pdf.worker.js";

import "./output.less";

const translateScale = (scale: string) => {
  if (scale.indexOf("%") > -1) {
    return (+scale.replace(/[^\d]+/g, ""))/100.0;
  }

  return 1;
}

export interface IOutputProps {
  path: string;
  needsRefresh: boolean;
  hasErrors: boolean;
  showPendingSpinner: boolean;

return new Promise(function (resolve, reject) {
            var simpleName = name
            name = FileManager._getFileName(name)
            var metadataFileName = metadataFilePrefix + name
            var fileName = filePrefix + name
            var firstPageFileName = firstPageFilePrefix + name
            var content = FileManager._getFileUrl(arrayBuffer, type)
            pdfjs.disableWorker = true
            pdfjs.getDocument(content).then((pdf) =>
            {
                pdf.getPage(1).then((page) =>
                {
                    var viewport = page.getViewport(0.6)
                    var canvas = document.createElement('canvas')
                    var context = canvas.getContext('2d')
                    canvas.height = viewport.height
                    canvas.width = viewport.width
                    page.render({canvasContext: context, viewport: viewport}).then(() =>
                    {
                        var firstPage = canvas.toDataURL('image/jpeg')
                        var now = (new Date()).getTime()
                        var metadata = {
                            name: simpleName,
                            size: size,