{"id":11886,"library":"react-to-pdf","title":"React to PDF","description":"react-to-pdf is a JavaScript/TypeScript library designed to convert React components into PDF documents by rendering them as images within the PDF. The current stable version is 3.2.2. The project's release cadence is closely tied to its underlying dependency, jsPDF, often releasing minor or patch updates following jsPDF's security and feature releases, with major versions of react-to-pdf typically aligning with major jsPDF upgrades. A key differentiator is its simplicity and direct approach: it captures a screenshot of the React component rather than generating a vectorized PDF, which means the content is rasterized and not scalable like true vector graphics. This also means it does not support Server-Side Rendering (SSR). For vectorized or more advanced PDF generation from React, the library explicitly recommends alternatives like `@react-pdf/renderer` or `react-pdf` (for display).","status":"active","version":"3.2.2","language":"javascript","source_language":"en","source_url":"https://github.com/ivmarcos/react-to-pdf","tags":["javascript","pdf","react","convert","typescript"],"install":[{"cmd":"npm install react-to-pdf","lang":"bash","label":"npm"},{"cmd":"yarn add react-to-pdf","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-to-pdf","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for using React components.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components.","package":"react-dom","optional":false},{"reason":"Core runtime dependency for PDF generation; updated frequently for security and features.","package":"jspdf","optional":false}],"imports":[{"note":"The `usePDF` hook is a named export for functional components. CommonJS `require` syntax is generally not compatible with modern React setups using ES modules.","wrong":"const { usePDF } = require('react-to-pdf')","symbol":"usePDF","correct":"import { usePDF } from 'react-to-pdf'"},{"note":"`generatePDF` is the default export of the library; import it without curly braces. Attempting to import it as a named export will result in an error.","wrong":"import { generatePDF } from 'react-to-pdf'","symbol":"generatePDF","correct":"import generatePDF from 'react-to-pdf'"},{"note":"These are named exports representing enums or constants used to configure advanced PDF generation options.","symbol":"Resolution, Margin","correct":"import { Resolution, Margin } from 'react-to-pdf'"}],"quickstart":{"code":"import { usePDF } from 'react-to-pdf';\n\nconst MyPdfDocument = () => {\n const { toPDF, targetRef } = usePDF({\n filename: 'my-react-component.pdf',\n page: {\n margin: 10, // in mm\n format: 'A4',\n orientation: 'portrait'\n }\n });\n\n return (\n
\n \n
\n

Hello from React to PDF!

\n

This content will be converted into a PDF document.

\n \n

Current date: {new Date().toLocaleDateString()}

\n
\n
\n );\n};\n\nexport default MyPdfDocument;","lang":"typescript","description":"Demonstrates how to use the `usePDF` hook to generate and download a PDF from a React component's content, including basic page options."},"warnings":[{"fix":"Ensure your target browser environment is modern (non-IE). If `jsPDF` overrides were used, review `jsPDF` v4's breaking changes. Consider upgrading to the latest version for continued support.","message":"Version 3.0.0 introduced significant changes by upgrading to `jsPDF v4`, which dropped support for Internet Explorer. This also included various dependency updates and security fixes. Projects targeting older browsers need to either remain on an earlier `react-to-pdf` version or use polyfills for `jsPDF`.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Migrate to a modern browser environment. If stuck on `v2.x.x`, review `jsPDF v3`'s release notes for any other behavioral changes. It is recommended to upgrade to the latest stable version for security.","message":"Version 2.0.0 marked a major release, aligning with `jsPDF v3`'s breaking changes. This version dropped support for Internet Explorer and included security fixes for `jsPDF`'s `html` function by updating `dompurify`. While no other direct breaking changes were noted, the IE drop is significant.","severity":"breaking","affected_versions":">=2.0.0 <3.0.0"},{"fix":"Understand this limitation. If vectorized PDFs, text selection, or perfect scalability are critical, this library may not be suitable. Consider alternatives like `@react-pdf/renderer` which offers true vector-based PDF generation.","message":"The generated PDFs are not vectorized; they are created from a screenshot of the React component. This means the output is an image, not scalable vector graphics. Text in the PDF will not be selectable or searchable as native text.","severity":"gotcha","affected_versions":"*"},{"fix":"Only use this library in client-side React applications where a browser DOM is available. For server-side PDF generation, explore headless browser solutions or dedicated Node.js PDF libraries.","message":"The library does not support Server-Side Rendering (SSR). It relies on browser-specific APIs to capture the component's appearance, making it unsuitable for Node.js-only environments.","severity":"gotcha","affected_versions":"*"},{"fix":"Always upgrade to the latest stable version of `react-to-pdf` to ensure you receive all security patches from its dependencies. Monitor `jsPDF`'s security advisories for deeper insights.","message":"Multiple versions have addressed security vulnerabilities originating from the underlying `jsPDF` library (e.g., `v3.2.0`, `v3.1.0`, `v3.0.0`, `v2.0.2`, `v2.0.0`) and other dependencies like `tar-fs` (`v2.0.1`). Regularly updating to the latest stable version is critical to mitigate these risks.","severity":"breaking","affected_versions":"<3.2.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Increase the `resolution` option (e.g., `Resolution.HIGH` or a higher numeric value like `6` or `10`) in the `usePDF` hook or `generatePDF` options. Be aware that higher resolutions increase PDF file size and generation time.","cause":"The default `resolution` setting might be too low for the content or target display density, as the PDF is generated from an image capture.","error":"Content in PDF appears blurry or pixelated."},{"fix":"Ensure you are using ES module `import` statements for `react-to-pdf`. For example, use `import { usePDF } from 'react-to-pdf';` or `import generatePDF from 'react-to-pdf';`.","cause":"Attempting to use CommonJS `require()` syntax or incorrect ES module syntax in a modern JavaScript project configured for ES modules.","error":"ReferenceError: require is not defined or Module parse failed: 'import' and 'export' may only appear at the top level."},{"fix":"Ensure the target element is fully mounted and all asynchronous content (images, fonts) has loaded. Use the `overrides.canvas.useCORS: true` option if images are from a different origin. Implement a delay or wait for critical resources to load before triggering PDF generation.","cause":"The target React component might not have fully rendered, or external resources (images, fonts, complex CSS) might not have loaded before the PDF generation function was called. CORS issues can also prevent image loading.","error":"PDF is blank, incomplete, or missing styling/images."},{"fix":"Correct the import statement for `generatePDF` to `import generatePDF from 'react-to-pdf';`. Named exports like `usePDF`, `Resolution`, and `Margin` correctly use curly braces.","cause":"Incorrect import syntax for a default export. `generatePDF` is a default export, but it's being imported as a named export.","error":"TypeError: (0, react_to_pdf__WEBPACK_IMPORTED_MODULE_0__.generatePDF) is not a function"}],"ecosystem":"npm"}