@llamaindex/pdf-viewer
v1.2.0
Published
React PDF viewer for LLM applications
Downloads
11,160
Keywords
Readme
PDF viewer for RAG applications
PDF viewer component as used by secinsights. Using react-pdf.
Installation
npm install @llamaindex/pdf-viewer
Usage
import React from 'react';
import '@llamaindex/pdf-viewer/index.css';
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>
);
}
Custom Styles
<PdfFocusProvider>
<PDFViewer containerClassName="your-container-class-name" file={file} />
</PdfFocusProvider>
Multiple PDF Files
<PdfFocusProvider>
<div className="your-layout-class-name">
<PDFViewer file={file1} />
<PDFViewer file={file2} />
<PDFViewer file={file3} />
</div>
</PdfFocusProvider>
Next.js
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 },
+ );
Contributing
When making changes to this project, please follow these steps:
- Make your code changes
- Create a changeset to document your changes:
yarn changeset
- Commit your changes and the changeset
- When ready to release a new version:
yarn new-version
- To publish the new version:
yarn release
🙏 Thanks
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