React PDF viewer
Display PDF files in your React applications

Create a React PDF viewer using the GemBox.PdfViewer, a customizable JavaScript UI component that enables you to display PDF files in your React web applications easily.

Component features like print, save, search, select text, navigation, digital signing, and custom theme support will add the look & feel of a standalone PDF application to your React apps.

Here is the live demo of GemBox.PdfViewer in action:

Desktop Demo
Mobile Demo

How to add the PDF Viewer to your React application?

1. Install GemBox.PdfViewer

To add GemBox.PdfViewer to your React application using NPM or Yarn, use the following commands:

npm install @gembox/pdfviewer
# or
yarn add @gembox/pdfviewer

2. Create the reusable React PDF Viewer component

Now you can use GemBox.PdfViewer in your React components. The following example is a basic PDF Viewer component that displays an existing PDF file:

import React, { useEffect, useRef } from 'react';
import { GemBoxPdfViewer } from '@gembox/pdfviewer';
import '@gembox/pdfviewer/dist/es/pdfviewer.css';

GemBoxPdfViewer.setLicense("FREE-LIMITED-KEY");

const PdfViewer = ({ initialDocument = null }) => {
  const viewerElement = useRef(null);

  useEffect(() => {
    GemBoxPdfViewer.create({
      container: viewerElement.current,
      initialDocument: initialDocument
    });
  }, []);

  return (
    <div ref={viewerElement} style={{ width: "600px", height: "350px" }}></div>
  );
};

export default PdfViewer;

You can save this component as PdfViewer.jsx and use it throughout your React application as needed.

3. Display PDF files in your React app

To display existing PDF documents you can use the React component created in the previous step:

import PdfViewer from "./PdfViewer";

function App() {
  return (
    <div>
      {/* Initializes PDF Viewer with a HelloWorld.pdf file  */}
      <PdfViewer initialDocument="/HelloWorld.pdf"/>
    
      {/* Shows empty PDF Viewer */}
      {/* <PdfViewer />  */}
    </div>
  );
}

export default App;

What next?

GemBox.PdfViewer enables your users to read existing PDF documents from your React apps using a React PDF viewer. More information on component's rich set of features is available in other examples. This enables you to customize the PDF viewer to your specific requirements.

Next steps

GemBox.PdfViewer is a JavaScript library that enables you to show PDF files seamlessly in your web applications.

Download Buy

React PDF viewerDisplay PDF files in your React applications