{"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).","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-to-pdf"],"cli":null},"imports":["import { usePDF } from 'react-to-pdf'","import generatePDF from 'react-to-pdf'","import { Resolution, Margin } from 'react-to-pdf'"],"auth":{"required":false,"env_vars":[]},"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    <div>\n      <button onClick={() => toPDF()}>Download PDF</button>\n      <div ref={targetRef} style={{\n        padding: '20px',\n        border: '1px solid #ccc',\n        borderRadius: '8px',\n        fontFamily: 'Arial, sans-serif'\n      }}>\n        <h1>Hello from React to PDF!</h1>\n        <p>This content will be converted into a PDF document.</p>\n        <ul>\n          <li>Item 1</li>\n          <li>Item 2</li>\n          <li>Item 3</li>\n        </ul>\n        <p>Current date: {new Date().toLocaleDateString()}</p>\n      </div>\n    </div>\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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}