{"library":"react-pdf","title":"React PDF Viewer","description":"React-PDF (currently at v10.4.1) is a JavaScript library for displaying PDF documents within React applications, leveraging Mozilla's PDF.js for rendering. It aims to simplify PDF integration by providing React components like `Document` and `Page`, abstracting the complexities of PDF.js. Major releases, such as v10.0.0, incorporate significant upgrades to the underlying PDF.js library, leading to enhanced stability and performance. The project maintains an active release cadence, with patch and minor updates released frequently to address bugs and introduce new features like customizable page colors and annotation filtering. A key differentiator since v10.1.0 is the support for functions as children within the `Document` component, which streamlines the API by offering direct access to PDF properties (e.g., `numPages`) without requiring manual state management or `onLoadSuccess` handlers, simplifying development. It ships with its own TypeScript definitions, making it well-suited for TypeScript projects.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-pdf"],"cli":null},"imports":["import { Document } from 'react-pdf'","import { Page } from 'react-pdf'","import { pdfjs } from 'react-pdf'","import 'react-pdf/dist/Page/AnnotationLayer.css'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { Document, Page, pdfjs } from 'react-pdf';\nimport 'react-pdf/dist/Page/AnnotationLayer.css';\nimport 'react-pdf/dist/Page/TextLayer.css';\n\n// Configure the PDF.js worker source. This is crucial for react-pdf to function.\n// For optimal performance and reliability, consider self-hosting pdf.worker.min.mjs\n// or using a robust CDN in production. The exact path may vary based on your bundler setup.\n// Example for modern bundlers: pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();\n// For simplicity in this example, we use unpkg.com, but be aware of CDN reliability for critical applications.\npdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;\n\nfunction MyPdfViewer() {\n  const fileUrl = 'https://pdfjs-express.com/sample-docs/webviewer-demo-advanced.pdf'; // Example public PDF URL\n\n  return (\n    <div style={{\n      fontFamily: 'sans-serif',\n      maxWidth: '800px',\n      margin: '20px auto',\n      padding: '15px',\n      border: '1px solid #eee',\n      borderRadius: '8px',\n      boxShadow: '0 2px 10px rgba(0,0,0,0.05)'\n    }}>\n      <h1 style={{ textAlign: 'center', color: '#333' }}>React-PDF Document Viewer</h1>\n      <p style={{ textAlign: 'center', color: '#666', marginBottom: '20px' }}>\n        A simple demonstration of rendering a PDF using <code>react-pdf</code> with the \"functions as children\" pattern.\n      </p>\n      <div style={{ border: '1px solid #ccc', borderRadius: '4px', overflow: 'hidden', backgroundColor: '#f9f9f9' }}>\n        <Document\n          file={fileUrl}\n          onLoadError={(error) => console.error('Error loading PDF:', error)}\n          loading=\"Loading PDF...\"\n          noData=\"No PDF file specified.\"\n        >\n          {({ pdf }) => (\n            pdf && Array(pdf.numPages)\n              .fill(null)\n              .map((_, index) => (\n                <div key={`page_${index + 1}`} style={{ marginBottom: '10px', borderBottom: index < pdf.numPages - 1 ? '1px solid #eee' : 'none' }}>\n                  <Page\n                    pageIndex={index} // pageIndex is 0-based\n                    width={760} // Adjust width to fit container or specific size\n                    renderAnnotationLayer={true}\n                    renderTextLayer={true}\n                  />\n                </div>\n              ))\n          )}\n        </Document>\n      </div>\n      <p style={{ textAlign: 'center', marginTop: '20px', color: '#777', fontSize: '0.9em' }}>\n        The PDF is loaded dynamically. Scroll to view all pages.\n      </p>\n    </div>\n  );\n}\n\nexport default MyPdfViewer;\n","lang":"typescript","description":"Demonstrates a basic PDF viewer using `Document` and `Page` components with the recommended 'functions as children' pattern (since v10.1.0) for dynamic page rendering and crucial `pdfjs.GlobalWorkerOptions.workerSrc` setup. It includes styling for a presentable viewer.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}