{"library":"react-fast-pdf","title":"React Fast PDF Viewer","description":"react-fast-pdf is a performant React component library engineered for efficient viewing and previewing of PDF documents within web applications. It is currently at stable version 1.0.33 and maintains an active, continuous release cadence, with new versions automatically published to npm upon merging pull requests to the main branch. Key differentiators for this library include its highly optimized rendering engine, allowing it to handle PDF files of virtually any size with robust performance, and its design for easy customization to integrate seamlessly into various application designs. Developed and supported by Expensify, it aims to consolidate the best features found in other PDF viewing solutions into a single, streamlined, and user-friendly tool for React developers.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-fast-pdf"],"cli":null},"imports":["import { PdfViewer } from 'react-fast-pdf';","import type { PdfViewerProps } from 'react-fast-pdf';","import { usePdf } from 'react-fast-pdf';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState, useEffect } from 'react';\nimport { PdfViewer } from 'react-fast-pdf';\n\nconst MyPdfComponent: React.FC = () => {\n  const [pdfUrl, setPdfUrl] = useState<string | null>(null);\n\n  useEffect(() => {\n    // In a real application, you might fetch this URL or get it from props\n    // For demonstration, using a public sample PDF URL\n    setPdfUrl('https://www.africau.edu/images/default/sample.pdf');\n  }, []);\n\n  if (!pdfUrl) {\n    return <div>Loading PDF...</div>;\n  }\n\n  return (\n    <div style={{ border: '1px solid #ccc', borderRadius: '8px', overflow: 'hidden', maxWidth: '900px', margin: '20px auto' }}>\n      <h2 style={{ padding: '10px 20px', margin: 0, backgroundColor: '#f0f0f0', borderBottom: '1px solid #eee' }}>Document Viewer</h2>\n      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '70vh' }}>\n        <PdfViewer\n          url={pdfUrl}\n          width={800} // Example fixed width\n          height={600} // Example fixed height\n          onLoadSuccess={() => console.log('PDF loaded successfully!')}\n          onLoadError={(error) => console.error('Error loading PDF:', error)}\n        />\n      </div>\n      <p style={{ padding: '10px 20px', margin: 0, fontSize: '0.9em', color: '#555' }}>\n        This example demonstrates basic usage of `react-fast-pdf` to display a PDF document.\n        The viewer automatically handles rendering and optimizing performance for large files.\n      </p>\n    </div>\n  );\n};\n\nexport default MyPdfComponent;\n","lang":"typescript","description":"This quickstart demonstrates how to embed and render a PDF document using the `PdfViewer` component, including basic state management for the PDF URL and event handling for load success or error. It provides a full, runnable React component.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}