PDF viewer component as used by secinsights. Using react-pdf.
npm install @llamaindex/pdf-viewerimport React from 'react';
import { PDFViewer, PdfFocusProvider } from '@llamaindex/pdf-viewer';
const file = {
id: 'sample-document',
url: 'https://d687lz8k56fia.cloudfront.net/sec-edgar-filings/0001045810/10-Q/0001045810-22-000147/filing-details.pdf',
};
function App() {
return (
<div className="AppContainer">
<PdfFocusProvider>
<PDFViewer file={file} />
</PdfFocusProvider>
</div>
);
}<PdfFocusProvider>
<PDFViewer containerClassName="your-container-class-name" file={file} />
</PdfFocusProvider><PdfFocusProvider>
<div className="your-layout-class-name">
<PDFViewer file={file1} />
<PDFViewer file={file2} />
<PDFViewer file={file3} />
</div>
</PdfFocusProvider>NextJs applications may need to update their configuration to be compatible with react-pdf v9 and pdfjs v4
If you have issues related to canvas, you can add the following to your next.config.js:
module.exports = {
webpack: (config) => {
config.resolve.alias.canvas = false;
return config;
},
}Another common issue is: TypeError: Promise.withResolvers is not a function
To fix this issue, you need to use dynamic imports for the PDF component (to indicate to NextJs to use it for client-side rendering only).
- import { PDFViewer, PdfFocusProvider } from "@llamaindex/pdf-viewer";
import dynamic from "next/dynamic";
// Dynamic imports for client-side rendering only
const PDFViewer = dynamic(
() => import("@llamaindex/pdf-viewer").then((module) => module.PDFViewer),
{ ssr: false },
);
const PdfFocusProvider = dynamic(
() =>
import("@llamaindex/pdf-viewer").then((module) => module.PdfFocusProvider),
{ ssr: false },
);Thanks to the developers of the following dependencies that we're using:
- react-pdf
- @wojtekmaj/react-hooks
- react-window
- react-intersection-observer
- lodash
- fuse.js