Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-pdf

Package Overview
Dependencies
Maintainers
1
Versions
146
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-pdf

Display PDFs in your React app as easily as if they were images.

  • 7.3.2
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
785K
decreased by-27.84%
Maintainers
1
Weekly downloads
 
Created

What is react-pdf?

The react-pdf package is a React component library that enables you to display PDF documents in your React applications. It provides a set of components that allow you to render PDF files as well as interact with them, such as zooming, paging, and rendering individual pages.

What are react-pdf's main functionalities?

Displaying a PDF document

This code sample demonstrates how to display a single page from a PDF document. The Document component takes a file prop which can be a URL, a file (as in a Blob or File object), or an ArrayBuffer. The Page component inside it renders the specified page number.

import { Document, Page } from 'react-pdf';

function MyApp() {
  return (
    <Document file="somefile.pdf">
      <Page pageNumber={1} />
    </Document>
  );
}

Custom rendering of pages

This code sample shows how to use a custom rendering mode for pages. The renderMode prop can be set to 'canvas', 'svg', or 'none'. The example also demonstrates how to set up the PDF.js worker script, which is required for parsing and rendering PDFs.

import { Document, Page, pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js';

function MyApp() {
  return (
    <Document file="somefile.pdf" renderMode="canvas">
      <Page pageNumber={1} />
    </Document>
  );
}

Handling loading states

This code sample illustrates how to handle loading states when working with PDF documents. The onLoadSuccess and onLoadError callbacks can be used to manage the document's loading state and handle any errors that occur.

import { Document, Page } from 'react-pdf';

function MyApp() {
  return (
    <Document
      file="somefile.pdf"
      onLoadSuccess={() => console.log('Loaded successfully!')}
      onLoadError={(error) => console.error('Error while loading document!', error.message)}
    >
      <Page pageNumber={1} />
    </Document>
  );
}

Navigating between pages

This code sample demonstrates how to navigate between pages in a PDF document. It uses React's useState hook to keep track of the current page number and provides buttons to go to the previous or next page.

import { Document, Page } from 'react-pdf';
import { useState } from 'react';

function MyApp() {
  const [pageNumber, setPageNumber] = useState(1);

  return (
    <div>
      <Document file="somefile.pdf">
        <Page pageNumber={pageNumber} />
      </Document>
      <button onClick={() => setPageNumber(pageNumber - 1)}>Previous</button>
      <button onClick={() => setPageNumber(pageNumber + 1)}>Next</button>
    </div>
  );
}

Other packages similar to react-pdf

Keywords

FAQs

Package last updated on 01 Aug 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc