A React component library for displaying PDF documents in your web applications with a simple and intuitive API.
pnpm add @react-pdf/renderer react-pdf
import { useState } from 'react'; import { Document, Page, pdfjs } from 'react-pdf'; // Configure PDF.js worker pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`; function PDFViewer({ url }) { const [numPages, setNumPages] = useState(null); const [pageNumber, setPageNumber] = useState(1); function onDocumentLoadSuccess({ numPages }) { setNumPages(numPages); } return ( <div className="pdf-viewer"> <Document file={url} onLoadSuccess={onDocumentLoadSuccess} > <Page pageNumber={pageNumber} /> </Document> <div className="controls"> <p> Page {pageNumber} of {numPages} </p> <button disabled={pageNumber <= 1} onClick={() => setPageNumber(pageNumber - 1)} > Previous </button> <button disabled={pageNumber >= numPages} onClick={() => setPageNumber(pageNumber + 1)} > Next </button> </div> </div> ); }