Baike.dev
All toolsAI codingTrendingOpen sourceNewsSubmit
Log in
< Back to tools
R

react-to-print

> 前端框架
Open source

Print React components in the browser

2.5K stars0 likes0 views
WebsiteGitHub

About

Print React components in the browser

# ReactToPrint - Print React components in the browser Print the content of a React component. `npm install --save react-to-print` ## Demo ## Usage ```tsx import { useReactToPrint } from "react-to-print"; import { useRef } from "react"; const contentRef = useRef(null); const reactToPrintFn = useReactToPrint({ contentRef }); return ( ); ``` It is also possible to lazy set the ref if your content being printed is dynamic. See the [`LazyContent`](https://github.com/MatthewHerbst/react-to-print/blob/master/examples/LazyContent/index.tsx) example for more. This can also be useful for setting the ref in non-React code, such as util functions. ## API | Option | Type | Description | | :-------------------: | :------- | :---------------------------------------------------------------------------------------------------------------------------------- | | **`bodyClass`** | `string` | One or more class names to pass to the print window, separated by spaces | | **`contentRef`** | `React.RefObject` | The ref pointing to the content to be printed. Alternatively, pass the ref directly to the callback returned by `useReactToPrint` | | **`copyShadowRoots`** | `boolean` | Copy shadow root content into the print window. Warning: Use with care if you print large documents as traversing these can be slow. | | **`documentTitle`** | `string \| (() => string)` | Set the title for printing when saving as a file. This is useful for including dynamic data like timestamps. Ignored when passing a custom `print` option | | **`fonts`** | `{ family: string, source: string; weight?: string; style?: string; }[]` | A list of fonts to load into the printing iframe. This is useful if you are using custom fonts | | **`ignoreGlobalStyles`** | `boolean` | Ignore all `

GitHub Issues· 0 open

View all on GitHub

No open issues yet, or sync has not completed.

Highlights

  • •Firefox Android (does not support window.print)
  • •Some mobile browser may, instead of printing, open the native Share action instead
  • •onAfterPrint may fire immediately (before the print dialog is closed) on newer versions of Safari where window.print does not block
  • •(401): TypeScript errors such as Type 'undefined' is not assignable to type 'ReactInstance | null'.. You likely need to set your ref to initially be null: useRef(null)

> Tags

TypeScriptjavascriptreactreactjs

No comments yet. Be the first to share.

> Details

PublishedAug 1, 2026
UpdatedSep 17, 2026
Category前端框架
PricingOpen source

> Related tools

R
React
用于构建用户界面的 JavaScript 库
V
Vue.js
渐进式 JavaScript 框架
N
Next.js
基于 React 的全栈 Web 框架