View PDF files in React applications
GemBox.PdfViewer is a customizable JavaScript UI component that enables you to easily display PDF files in your React web applications with just a few lines of code. A large set of features like search, text selection, print, digital signing, saving, navigation, and custom theme support will add the look and feel of standalone PDF applications to your React applications.
The following live demo demonstrates the GemBox PDF Viewer in action:
How to add the PDF Viewer to your React application?
1. Install GemBox PDF Viewer
To add GemBox.PdfViewer to your React application using NPM or Yarn, use the following commands:
npm install @gembox/pdfviewer
# or
yarn add @gembox/pdfviewer2. 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 PDF Viewer will allow your users to read existing PDF files from your React applications. Check the other examples for more information about GemBox.PdfViewer's rich set of features and customizations that will allow you to tailor the PDF viewer to your specific requirements.
