Ultimate React PDF

The most complete React PDF viewer for everyone, without dependencies and fully typed.

Demo

Requirements

React 16 or later.

Installation

NPM:

npm install ultimate-react-pdf

YARN:

yarn add ultimate-react-pdf

Usage

import { Document, Page } from "ultimate-react-pdf"

<>
  <Document src="https://pdfobject.com/pdf/sample.pdf">
    <Page controls />
  </Document>
</>

Or for infinity page:

import { Document, InfinityPage } from "ultimate-react-pdf"

<>
  <Document src={new URL("https://pdfobject.com/pdf/sample.pdf")}>
    <InfinityPage />
  </Document>
</>

Props

Document

Prop name	Description	Default value
src	The PDF itself. Can be a URL string where a PDF file is located or a base64 string. NOTE: If a URL is used to fetch the PDF data a standard Fetch API call (or XHR as fallback) is used, which means it must follow same origin rules. e.g. no cross-domain requests without CORS.
options	Some extra options such as password, headers..	{}
documentRef	Reference to the inner HTML element of the document.
externalLinkTarget	Link rel for links rendered in annotations.
externalLinkRel	Link target for external links rendered in annotations.
onDocumentError	Function called when the document load fails.
onDocumentLoad	Function called when the document loads successfully.
messages	List of messages used.	Default english messages.
className	Custom classname for the document container.

Page

Prop name	Description	Default value
controls	Show or hide the control buttons.	false
initialPage	Initial page number.	1
pageRef	Reference to the inner HTML element of the page.
viewPortScale	Custom viewport scale.	window.devicePixelRatio
annotations	Enable or disable the annotations.	true
onPageChange	Function called when the page changes.
onPageError	Function called when the page loads fails.
onPageLoad	Function called when the page loads successfully.
className	Custom classname for the page container.

Infinity page

Prop name	Description	Default value
pageRef	Reference to the inner HTML element of the page.
viewPortScale	Function called when the document load fails.	window.devicePixelRatio
annotations	Enable or disable the annotations.	true
onPageError	Function called when the page loads fails.
onPageLoad	Function called when the page loads successfully.
className	Custom classname for the page container.

License

Under MIT License.