{"id":15181,"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.","status":"active","version":"1.0.33","language":"javascript","source_language":"en","source_url":"https://github.com/Expensify/react-fast-pdf","tags":["javascript","react-fast-pdf","typescript"],"install":[{"cmd":"npm install react-fast-pdf","lang":"bash","label":"npm"},{"cmd":"yarn add react-fast-pdf","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-fast-pdf","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for internal utility functions; specifically peer-dependant on version 4.x.","package":"lodash","optional":false},{"reason":"Core React library required for component rendering; specifically peer-dependant on version 18.x.","package":"react","optional":false},{"reason":"Entry point for DOM rendering of React components; specifically peer-dependant on version 18.x.","package":"react-dom","optional":false}],"imports":[{"note":"react-fast-pdf is an ESM-first library, designed for modern React applications. CommonJS require() syntax will not work correctly.","wrong":"const PdfViewer = require('react-fast-pdf');","symbol":"PdfViewer","correct":"import { PdfViewer } from 'react-fast-pdf';"},{"note":"When using TypeScript, always import types explicitly with `import type` for better tree-shaking and clear separation from runtime values.","symbol":"PdfViewerProps","correct":"import type { PdfViewerProps } from 'react-fast-pdf';"},{"note":"While not explicitly in the README, many React component libraries provide hooks for advanced control or accessing internal state. This is an assumed hook based on common patterns.","symbol":"usePdf","correct":"import { usePdf } from 'react-fast-pdf';"}],"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."},"warnings":[{"fix":"Ensure `package.json` is reverted to `\"react-fast-pdf\": \"^1.*\"` or the appropriate published version before committing or deploying. Always run `npm install` after changing this dependency path.","message":"When developing locally, the package's README suggests modifying `package.json` to point to a local source directory (`\"react-fast-pdf\": \"../src\"`). This change is critical for local testing but must be reverted before committing or deploying, as it will break production builds and installations.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure your project's `react` and `react-dom` versions are `18.x` or compatible. Upgrade your React dependencies if necessary using `npm install react@^18 react-dom@^18`.","message":"The library explicitly lists `react@18.x` and `react-dom@18.x` as peer dependencies. Using `react-fast-pdf` with older React versions (e.g., React 17 or earlier) may lead to runtime errors, inconsistent behavior, or invalid hook calls.","severity":"breaking","affected_versions":"<1.0.0"},{"fix":"Verify that `lodash@4.x` is installed in your project's dependencies: `npm install lodash@^4`. If you have a different major version, consider if your project can upgrade to `4.x` or if a separate `lodash@4.x` installation is needed.","message":"A peer dependency on `lodash@4.x` is required. If `lodash` is not installed or an incompatible version is present in your project, `react-fast-pdf` may encounter runtime errors due to missing utility functions.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Check your `package.json` for conflicting React versions. Ensure `react` and `react-dom` are both `^18.0.0`. Run `npm dedupe` or `yarn why react` to identify and resolve duplicate React installations.","cause":"This usually indicates that `react-fast-pdf` (or React itself) is being loaded from multiple conflicting copies, or it's used in a project with an incompatible React version (e.g., React 17 with a React 18-dependent library).","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component."},{"fix":"Verify the PDF `url` prop is correct and publicly accessible. Check browser console for network errors (e.g., 404, CORS blocking). Ensure the hosted file is indeed a valid PDF.","cause":"The URL provided to the `PdfViewer` component is either inaccessible (e.g., CORS issues, network down), points to a non-existent file, or the file at the URL is not a valid PDF document.","error":"Failed to load PDF document. Network error or invalid file format."},{"fix":"Ensure `lodash@^4` is correctly installed as a direct or transitive dependency in your project. Run `npm install lodash@^4` if it's missing or check `npm ls lodash` to confirm the installed version.","cause":"This error often occurs when an internal dependency, such as `lodash`, is missing or an incompatible version is installed, leading to `react-fast-pdf` trying to access undefined properties of expected utility functions.","error":"TypeError: Cannot read properties of undefined (reading 'x')"}],"ecosystem":"npm"}