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;