View PDF files in React application
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 application.
The following example 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 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. Render PDF file in your React app
To render 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 HellowWorld.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. The examples can help you understand its rich set of features and customizations that will allow you to tailor PDF viewer to your specific requirements.
