Getting Started with React PDF Viewer

8 Sep 20266 minutes to read

This section explains how to create a simple React application and add the standalone Syncfusion® React PDF Viewer component with the minimum required setup.

Prerequisites

System requirements for Syncfusion® React components

Create a React application

Use Vite to create a new React application for a faster development environment, smaller bundle sizes, and optimized production builds.

To create a new React application, run one of the following commands based on your preferred environment.

npm create vite@latest pdf-viewer-app -- --template react
cd pdf-viewer-app
npm create vite@latest pdf-viewer-app -- --template react-ts
cd pdf-viewer-app

Install the Syncfusion® React PDF Viewer package

Install the React PDF Viewer package from npm using the following command:

npm install @syncfusion/ej2-react-pdfviewer --save

Import the required CSS styles

Themes for PDF Viewer can be applied using CSS or SASS files from the npm theme packages, CDN, CRG, or Theme Studio. For more information, see the themes documentation.

This guide uses the Tailwind 3 theme as an example, sourced from the theme package. In this package, each component includes an index.css file that automatically loads all the required dependency styles. To install the Tailwind 3 theme package, use the following command:

npm install @syncfusion/ej2-tailwind3-theme

By default, Vite projects include a src/index.css file with default styles. These default styles may conflict with Syncfusion component styles. Clear all content from the src/index.css file to prevent style conflicts.

The required styles for the PDF Viewer are imported in the src/index.css file:

@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css';

The index.css file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, and SplitButtons separately.

Add the Syncfusion® React PDF Viewer component to the application

Add the Syncfusion® React PDF Viewer component to your src/App.jsx or src/App.tsx file.

The key props and services used in the following samples are:

  • documentPath: URL or Base64 string of the PDF to load.
  • resourceUrl: Path to the PDFium (pdfium.js / pdfium.wasm) assets required for rendering.
  • Inject services={[...]}: Registers the optional modules (toolbar, navigation, annotations, search, form fields, etc.) you want to enable.
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
         ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner,
         PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';

export default function App() {
    return (
      <PdfViewerComponent id="container"
        // Specifies the URL (for example, a file from the public folder) or a Base64-encoded PDF.
        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
        // Specifies the path to the PDFium resource files required for the PDF Viewer to function.
        resourceUrl="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2-pdfviewer-lib">

         <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
                             BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
                             FormFields, FormDesigner, PageOrganizer ]}/>
      </PdfViewerComponent>
    );
}
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
         ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner,
         PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
 
export default function App() {
  return (
    <PdfViewerComponent id="container"
      // Specifies the URL (for example, a file from the public folder) or a Base64-encoded PDF.
      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      // Specifies the path to the PDFium resource files required for the PDF Viewer to function.
      resourceUrl="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2-pdfviewer-lib">
      <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
                          BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
                          FormFields, FormDesigner, PageOrganizer ]}/>
    </PdfViewerComponent>
  );
}

To load PDF documents and resources from your local application instead of a CDN, refer to Load PDF Viewer with Local Resources.

Run the application

Run the following command to start the React application:

npm run dev

After the application starts, open the localhost URL shown in the terminal to view the React PDF Viewer in the browser. The output will appear as follows:

React PDF Viewer Control

You can also explore the PDF Viewer interactively using the live sample below.

View sample in GitHub.

Video tutorial

To get started quickly with React PDF Viewer, you can watch this video:

See also