How to Display Two PDF Viewer Side by Side in a React Application?

Description:

This article explains how to render two Syncfusion® PDF Viewer components side by side in a React PDF Viewer application. This layout is useful when you want to compare two documents simultaneously or provide a dual view reading experience.

Solution:

To display two PDF Viewer components side by side, use a flex container with row direction. Each viewer is given equal space using the flex: 1 style. This ensures both viewers are rendered next to each other with equal width.

Prerequisites:

1. Syncfusion PDF Viewer Setup: Ensure that the Syncfusion PDF Viewer is installed and configured in your React project. Refer to the Getting Started documentation if you haven’t set it up yet.
2. Basic Knowledge of React: Familiarity with functional components and DOM access will be helpful for understanding the implementation.

Code Snippet

index.js

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, PageOrganizer } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  let viewer1;
  let viewer2;
  return (
    <div>
      <div className="control-section">
        {/* Flex container to align viewers side by side */}
        <div className="flex-container">
        </div>
        <div style={{ display: 'flex', flexDirection: 'row' }}>
          {/* First PDF Viewer */}
          <PdfViewerComponent
            ref={(scope) => {
              viewer1 = scope;
            }}
            id="container1"
            documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
            resourceUrl="https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib"
            style={{ height: '640px', flex: 1 }}
          >
            <Inject
              services={[
                Toolbar,
                Magnification,
                Navigation,
                LinkAnnotation,
                BookmarkView,
                ThumbnailView,
                Print,
                TextSelection,
                TextSearch,
                Annotation,
                FormFields,
                FormDesigner,
                PageOrganizer,
              ]}
            />
          </PdfViewerComponent>
          {/* Second PDF Viewer */} 
          <PdfViewerComponent
            ref={(scope) => {
              viewer2 = scope;
            }}
            id="container2"
            documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
            resourceUrl="https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib"
            style={{ height: '640px', flex: 1 }}
          >
            <Inject
              services={[
                Toolbar,
                Magnification,
                Navigation,
                LinkAnnotation,
                BookmarkView,
                ThumbnailView,
                Print,
                TextSelection,
                TextSearch,
                Annotation,
                FormFields,
                FormDesigner,
                PageOrganizer,
              ]}
            />
          </PdfViewerComponent>
        </div>
      </div>
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

Key Features Used in the Code:

1. Flexbox Layout: Uses display: flex with flexDirection: ‘row’ to align components horizontally.
2. Syncfusion PDF Viewer: Two instances of PdfViewerComponent are rendered with full feature support.
3. Inject Services: Enables features like toolbar, navigation, annotations, and form filling.

Sample:

You can find the full sample code in our GitHub repository.

Conclusion:

I hope you enjoyed learning how to display two PDF Viewer side by side in a React Application. This layout is especially helpful for document comparison, dual reading, or enhancing productivity by viewing multiple files simultaneously.

You can refer to React PDF feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React PDF Viewer example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support or feedback portal. We are always happy to assist you!