View PDF files in React application

GemBox.PdfViewer can be easily integrated into React projects.

First, you need to install GemBox.PdfViewer using NPM or Yarn with one of the following commands:

npm install @gembox/pdfviewer
# or
yarn add @gembox/pdfviewer

After that you can use GemBox.PdfViewer in your React components. Following example is a basic PDF Viewer component:

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 = () => {
	const viewerElement = useRef(null);

	useEffect(() => {
		GemBoxPdfViewer.create({
			container: viewerElement.current
		});
	}, []);

	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:

import PdfViewer from "./PdfViewer";

function App() {
	return (
		<div>
			<PdfViewer />
		</div>
	);
}

export default App;

See also


Next steps

GemBox.PdfViewer is a JavaScript library that enables you to show PDF files seamlessly in your web applications.

Download Buy