# react-pdf-js `react-pdf-js` provides a component for rendering PDF documents using [PDF.js](http://mozilla.github.io/pdf.js/). --- [![NPM Version](https://img.shields.io/npm/v/react-pdf-js.svg?style=flat-square)](https://www.npmjs.com/package/react-pdf-js) [![NPM Downloads](https://img.shields.io/npm/dm/react-pdf-js.svg?style=flat-square)](https://www.npmjs.com/package/react-pdf-js) [![Build Status](https://travis-ci.com/mikecousins/react-pdf-js.svg?branch=master)](https://travis-ci.com/mikecousins/react-pdf-js) [![Dependency Status](https://david-dm.org/mikecousins/react-pdf-js.svg)](https://david-dm.org/mikecousins/react-pdf-js) [![devDependency Status](https://david-dm.org/mikecousins/react-pdf-js/dev-status.svg)](https://david-dm.org/mikecousins/react-pdf-js#info=devDependencies) [![Netlify Status](https://api.netlify.com/api/v1/badges/4ce8e5b5-16ca-4942-8c47-095debbc4693/deploy-status)](https://app.netlify.com/sites/pdf/deploys) # Demo https://pdf.netlify.com # Usage Install with `yarn add react-pdf-js` or `npm install react-pdf-js` Use it in your app (showing some basic pagination as well): ```js import React, { useState, useEffect, useRef } from 'react'; import { usePdf } from 'react-pdf-js'; const MyPdfViewer = () => { const [page, setPage] = useState(1); const [pages, setPages] = useState(null); const renderPagination = (page, pages) => { if (!pages) { return null; } let previousButton =

setPage(page - 1)}> Previous

; if (page === 1) { previousButton =

; } let nextButton =

setPage(page + 1)}>Next

; if (page === pages) { nextButton =

; } return ( ); } const canvasEl = useRef(null); const [loading, numPages] = usePdf({ file: 'test.pdf', onDocumentComplete, page, canvasEl }); useEffect(() => { setPages(numPages); }, [numPages]); return (

{loading && Loading...}

); } export default MyPdfViewer; ``` # Props When you call usePdf you'll want to pass in a subset of these props, like this: > `const [loading, numPages] = usePdf({ canvasEl, file: 'https://example.com/test.pdf', page });` ## canvasEl A reference to the canvas element. Create with: > `const canvasEl = useRef(null);` and then render it like: > `

	Stars	Issues	Version	Updated	Created
react-pdf-annotations			3.2.8	a year ago	3 years ago
react-pdf-js	685	15	5.1.0	5 years ago	8 years ago
react-pdf-ner-annotator			3.4.1	a year ago	4 years ago
react-pdfjs			1.0.7	8 years ago	8 years ago

react-pdf-annotations vs react-pdf-js vs react-pdf-ner-annotator vs react-pdfjs

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past