A React hook for rendering PDF files as images
npm install use-pdf-renderer pdfjs-dist import { usePdfRenderer } from 'use-pdf-renderer'; import 'pdfjs-dist/build/pdf.worker.min'; function PdfViewer() { const { images, loading, progress, error, renderPdf } = usePdfRenderer(); const handleFileChange = (event) => { const file = event.target.files?.[0]; if (file) { const url = URL.createObjectURL(file); renderPdf(url) .catch(console.error) .finally(() => URL.revokeObjectURL(url)); } }; return ( <div> <input type="file" accept=".pdf" onChange={handleFileChange} /> {loading && <div>Loading... {(progress * 100).toFixed(0)}%</div>} {error && <div>Error: {error.message}</div>} {images.map((image, index) => ( <img key={index} src={image} alt={`Page ${index + 1}`} style={{ maxWidth: '100%' }} /> ))} </div> ); }| Option | Type | Default | Description |
|---|---|---|---|
| scale | number | 2 | Scale factor for rendering |
| quality | number | 0.8 | Image quality (0-1) |
| imageType | 'png' | 'jpeg' | 'png' | Output format |
| withCredentials | boolean | false | Send credentials with request |
| Value | Type | Description |
|---|---|---|
| images | string[] | Array of rendered page images |
| loading | boolean | Loading state |
| progress | number | Progress (0-1) |
| error | Error | null | Error if any |
| renderPdf | function | Render PDF from URL |
| reset | function | Reset viewer state |
MIT