The Ultimate Guide to Implementing React PDF Viewer in Your Applications

In the modern web development landscape, the ability to display PDF files directly within a web application is a crucial feature. Whether it's for viewing reports, invoices, or e-books, users expect a seamless experience when interacting with PDF documents.

React, a popular library for building user interfaces, offers developers the tools to create rich and interactive UIs. However, when it comes to displaying PDFs, developers often need to rely on additional libraries to bridge the gap between React's capabilities and the specific requirements of rendering PDF files.

Understanding the Need for PDF Viewing in Web Applications

PDFs are a standard format for sharing documents that maintain formatting across different platforms and devices, including mobile devices. This consistency ensures all users have the same experience when viewing a document. In a React app, integrating a PDF viewer allows users to access content without downloading and opening the file in a separate application. This integration enhances the user experience by providing immediate access to the content within the same user interface.

Overview of React-PDF Library

The React-PDF library is a popular solution for rendering PDF documents in React applications. It simplifies displaying existing PDFs, much like how images are handled in web pages. With React-PDF, developers can quickly load PDF files and render them within their React components, offering a seamless viewing experience to users.

React-PDF is built on top of PDF.js, a general-purpose PDF rendering library created by Mozilla. This connection ensures that React-PDF benefits from the robustness and browser compatibility of PDF.js.

React-PDF also provides a range of options for customization, allowing developers to tailor the PDF viewer to the needs of their project. Whether it's custom styling, navigation controls, or handling large documents for optimal performance, React-PDF offers the flexibility needed to create a robust PDF viewing experience.

Setting Up React-PDF in Your Project

Integrating a PDF viewer into your React app begins with setting up the React-PDF library. This process involves adding the library to your project and importing the necessary components to render PDF documents. React-PDF provides a straightforward approach, ensuring developers can quickly move on to the more exciting aspects of building their application's UI.

Installing react-pdf

Before displaying PDF files in your React app, install the React-PDF library. This famous library is available as an npm package, which means you can add it to your project with a simple npm install command. If you're using yarn, you can equally add the library using the yarn add command. Here's how you can install React-PDF in your project:

npm install react-pdf

Or, if you prefer using yarn:

yarn add react-pdf

With these commands, React-PDF will be added to your project's dependencies, and you'll be ready to import and use its components. It's important to note that React-PDF is frequently updated, so ensure you install the version compatible with your React version to avoid compatibility issues.

Importing react-pdf Components

Once you have installed the React-PDF library in your project, the next step is to import the necessary components. The primary components provided by React-PDF are Document and Page. The Document component serves as a container for the PDF document, while the Page component is responsible for rendering individual pages within the PDF.

Here's how you can import these components into your React component file:

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

After importing, you can use these components in your React app to display PDF documents. The Document component requires a file prop specifying the source of the PDF file you want to display. The source can be a URL, a file imported into your project, or a base64-encoded string.

Displaying a PDF with react-pdf

Once you have React-PDF installed and the components imported into your React project, you're all set to start displaying PDF documents. React-PDF simplifies integrating a PDF viewer into your React app, allowing you to load and render PDF documents quickly.

Loading PDF Documents

To load a PDF document using React-PDF, you'll utilize the Document component. This component fetches and parses the PDF data, which can be displayed using the Page component. The file prop on the Document component is versatile, accepting various inputs such as a URL, a file object, or even a binary string.

Here's an example of how to load a PDF document from a URL:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React from 'react';
import { Document, pdfjs } from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.js',
  import.meta.url,
).toString();

const PdfLoader = ({ fileUrl }) => {
  return (
    <>
    <Document
      file={fileUrl}
      onLoadSuccess={({ numPages }) => console.log(`Document loaded with ${numPages} pages.`)}
      onLoadError={(error) => console.error('Error occurred while loading document:', error.message)}
    />
    </>

  );
};

export default PdfLoader;

In this example, the PdfLoader component accepts a fileUrl prop and passes it to the Document component's file prop. The onLoadSuccess callback is triggered when the document is successfully loaded, providing information such as the total number of pages. The onLoadError callback handles any errors that may occur during the loading process.

Rendering PDF Pages

After loading the PDF document, you'll want to render the pages within it. The Page component is used for this purpose. Each Page component instance corresponds to a single page in the PDF document, and you can control which page to render using the pageNumber prop.

Here's how you can render the first page of a PDF document:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from 'react';
import { Document, Page, pdfjs } from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.js',
  import.meta.url,
).toString();

const PdfViewer = ({ fileUrl }) => {
  return (
    <div>
      <Document file={fileUrl}>
        <Page pageNumber={1} />
      </Document>
    </div>
  );
};

export default PdfViewer;

In this PdfViewer component, the Document component loads the PDF document from the provided fileUrl, and the Page component renders the first page of that document. You can render multiple pages by adding more Page components with different pageNumber props.

react-pdf also allows for more advanced page rendering options, such as setting the scale or rotation of pages, customizing the rendering mode, and handling text layers for text selection. These features give you the flexibility to create a PDF viewer tailored to the specific needs of your users and your project.

Customizing the PDF Viewer

React-PDF enables you to render PDFs in your React app and offers extensive customization options. This flexibility allows you to tailor the PDF viewer to match your application's look and feel and enhance the user experience with additional functionality like navigation and controls.

Styling the PDF Viewer

The appearance of the PDF viewer can be customized to align with your app's design. React-PDF components accept standard className and style props, allowing you to apply custom styles. You can adjust the size, background color, borders, and more, using either CSS classes or inline styles.

Here's an example of how to apply custom styles to the PDF viewer:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React from 'react';
import { Document, Page, pdfjs } from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.js',
  import.meta.url,
).toString();

const PdfViewer = ({ fileUrl }) => {

  const customStyles = {
    border: '6px solid black',
    borderRadius: '5px',
    overflow: 'hidden',
  };

  return (
    <div style={customStyles}>
      <Document file={fileUrl}>
        <Page pageNumber={1} />
      </Document>
    </div>
  );
};

export default PdfViewer;

In this PdfViewer component, we've defined a customStyles object with CSS properties and applied it to a wrapper div around the Document component. This approach gives the PDF viewer a custom border and rounded corners.

Adding Navigation and Controls

To enhance the interactivity of your PDF viewer, consider adding navigation controls that allow users to move between pages or zoom in and out of the document. React-PDF does not provide built-in navigation controls, but you can quickly implement your own using React state and event handlers.

Here's an example of adding simple navigation controls to your PDF viewer:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import React, { useState } from 'react';
import { Document, Page, pdfjs } from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.js',
  import.meta.url,
).toString();

const PdfViewer = ({ fileUrl }) => {

  const [pageNumber, setPageNumber] = useState(1);
  const [numPages, setNumPages] = useState(null);

  const onDocumentLoadSuccess = ({ numPages }) => {
    setNumPages(numPages);
  };

  const goToPrevPage = () => {
    setPageNumber((prevPageNumber) => Math.max(prevPageNumber - 1, 1));
  };

  const goToNextPage = () => {
    setPageNumber((prevPageNumber) => Math.min(prevPageNumber + 1, numPages));
  };

  return (
    <div>
      <Document file={fileUrl} onLoadSuccess={onDocumentLoadSuccess}>
        <Page pageNumber={pageNumber} />
      </Document>
      <div>
        <button onClick={goToPrevPage} disabled={pageNumber <= 1}>
          Previous
        </button>
        <button onClick={goToNextPage} disabled={pageNumber >= numPages}>
          Next
        </button>
      </div>
      <p>
        Page {pageNumber} of {numPages}
      </p>
    </div>
  );
};

export default PdfViewer;

In this PdfViewerWithControls component, we've added two buttons to navigate to the previous and next pages. We use the React state to keep track of the current page number and the total number of pages in the document. The onDocumentLoadSuccess callback updates the total page count, while the goToPrevPage and goToNextPage functions update the current page number.

Ensuring Accessibility and Mobile Responsiveness

Accessibility and mobile responsiveness are critical aspects of modern web development. To make your PDF viewer accessible and user-friendly on mobile devices, consider the following:

1. Keyboard Accessibility: Ensure that all interactive elements in your PDF viewer are accessible via keyboard navigation and that appropriate ARIA roles and attributes are used.
2. Text Selection: Enable text selection in PDFs to allow users to copy text. This can be done by setting the renderTextLayer prop to true on the Page component.
3. Responsive Design: Use CSS media queries and flexible layouts to ensure the PDF viewer is usable on various screen sizes. Consider scaling or reflowing pages to fit the screen width on smaller devices.
4. Touch Interactions: Implement touch-friendly controls and gestures for mobile users, such as pinch-to-zoom and swipe to navigate between pages.

Conclusion

Incorporating a PDF viewer into your React application doesn't have to be a daunting task. With the React-PDF library, you can seamlessly display PDF documents, offering users a native, in-app experience for interacting with PDFs. By following the steps outlined in this blog, you've learned how to set up React-PDF, load and render PDF pages, customize the viewer's appearance, and add navigation controls to enhance user interaction. You can ensure that your PDF viewer provides a seamless and inclusive experience. With React-PDF, you have the tools to create a robust and user-friendly PDF viewer that enhances the functionality of your React app.