{"library":"react-to-print","title":"Print React Components","description":"react-to-print is a widely used React component library designed to facilitate printing the contents of React components directly from the browser. It works by creating a temporary iframe, injecting the specified component's DOM, and then triggering the browser's print dialog. The current stable version is 3.3.0, released in February 2026, with frequent patch and minor releases, indicating active maintenance and development. Key differentiators include its `useReactToPrint` hook for functional components, extensive customization options for print styles (like `pageStyle`, `bodyClass`, `ignoreGlobalStyles`), and callbacks for managing print lifecycle events (`onBeforePrint`, `onAfterPrint`, `onPrintError`). It also provides support for loading custom fonts and handling shadow DOMs, addressing common challenges in web printing.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-to-print"],"cli":null},"imports":["import { useReactToPrint } from 'react-to-print';","import ReactToPrint from 'react-to-print';","import React, { useRef, type RefObject } from 'react';\n// ...or for use in a function:\nconst contentRef = useRef<HTMLDivElement>(null);"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { useReactToPrint } from 'react-to-print';\nimport React, { useRef } from 'react';\n\nconst MyPrintableComponent = () => {\n  const componentRef = useRef<HTMLDivElement>(null);\n\n  const handlePrint = useReactToPrint({\n    content: () => componentRef.current,\n    documentTitle: 'My Custom Print Document',\n    pageStyle: '@page { size: auto; margin: 25mm; } @media print { body { -webkit-print-color-adjust: exact; } }',\n    onBeforePrint: async () => {\n      console.log('onBeforePrint callback!');\n      // Potentially fetch data or modify component state before print\n      await new Promise(resolve => setTimeout(resolve, 500)); // Simulate async work\n    },\n    onAfterPrint: () => console.log('onAfterPrint callback!')\n  });\n\n  return (\n    <div>\n      <button onClick={handlePrint}>Print this out!</button>\n      <div ref={componentRef} style={{ padding: '20px', border: '1px solid #ccc' }}>\n        <h1>Document Title</h1>\n        <p>This is the content that will be printed. It can be any React component's output.</p>\n        <p>Example: User ID: {process.env.REACT_APP_USER_ID ?? 'N/A'}</p>\n        <ul>\n          <li>Item 1</li>\n          <li>Item 2</li>\n          <li>Item 3</li>\n        </ul>\n      </div>\n    </div>\n  );\n};\n\nexport default MyPrintableComponent;","lang":"typescript","description":"Demonstrates basic usage of `useReactToPrint` hook to print a component's content, including ref setup, print options, and lifecycle callbacks.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}