Syncfusion AI Assistant

How can I help you?

Getting Started with React Standalone PDF Viewer Component

19 Jun 20265 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, as it provides 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

Add CSS references

Add the following PDF Viewer and dependent component style references to the src/index.css file.

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import "../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";

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.

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/31.2.2/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"
      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      resourceUrl="https://cdn.syncfusion.com/ej2/dist/ej2-pdfviewer-lib">
      <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
                          BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
                          FormFields, FormDesigner, PageOrganizer ]}/>
    </PdfViewerComponent>
  );
}

NOTE

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