React PDF Reader

A React component to read PDF Document.

Installation

npm

npm install react-pdf-reader --save

yarn

yarn add react-pdf-reader

Usage

Import the component in your React app :

import PDFReader from "react-pdf-reader";

<PDFReader
    file="pdf/sample.pdf"
    renderType="canvas"
/>

Import TextLayer stylesheet :

import "react-pdf-reader/dist/TextLayerBuilder.css";
//OR 
import "react-pdf-reader/dist/sass/TextLayerBuilder.scss";

Or copy /node_modules/react-pdf-reader/dist/TextLayerBuilder.css in your static files folder and import :

<link rel="stylesheet" href="css/TextLayerBuilder.css" />

Import default reader stylesheet ( Optional but recommended :) ) :

import "react-pdf-reader/dist/PdfReader.css";
//OR 
import "react-pdf-reader/dist/sass/PdfReader.scss";

Or copy /node_modules/react-pdf-reader/dist/PdfReader.css in your static files folder and import :

<link rel="stylesheet" href="css/PdfReader.css" />

Prop types

Prop|Description|Sample --- | --- | --- file| Define the url of the PDF Document.|file="pdf/sample.pdf" renderType| Define the type of the PDF display render. You have the choice between "canvas" and "svg". Default : svg| Make render by SVG : renderType="svg"Make render by canvas : renderType="canvas"