# matthewherbst/react-to-print

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/matthewherbst-react-to-print).**

2,474 stars · 235 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/MatthewHerbst/react-to-print
- Homepage: https://www.npmjs.com/package/react-to-print
- awesome-repositories: https://awesome-repositories.com/repository/matthewherbst-react-to-print.md

## Topics

`javascript` `react` `reactjs`

## Description

This project is a React print component and utility for rendering specific components or DOM elements into a browser print dialog. It functions as a print layout controller and lifecycle manager, using a hidden iframe to isolate content so that printing does not alter the main page layout.

The tool specializes in copying DOM and Shadow DOM content into a printable window while preserving encapsulated styles. It allows for the injection of custom fonts and CSS to manage page breaks, margins, and orientations for consistent physical paper or PDF output.

The library includes asynchronous lifecycle hooks for updating application state before and after printing, as well as configuration for print iframe attributes and document metadata. It also supports non-browser environments by allowing the standard print method to be replaced with a custom implementation.

## Tags

### User Interface & Experience

- [Targeted Element Printing](https://awesome-repositories.com/f/user-interface-experience/targeted-element-printing.md) — Enables sending specific DOM content from a component directly to the browser print dialog without affecting the main page. ([source](https://github.com/MatthewHerbst/react-to-print/blob/master/README.md))
- [React Components](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components.md) — Provides a React component that renders specific elements into a hidden iframe to trigger the browser print dialog.
- [Printable](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components/printable.md) — Sends specific React components to the browser print dialog without affecting the main page layout or visibility. ([source](https://github.com/MatthewHerbst/react-to-print#readme))
- [Print Isolation Frames](https://awesome-repositories.com/f/user-interface-experience/extensible-interfaces/plugin-renderers/iframe-based-rendering/print-isolation-frames.md) — Renders targeted components into a hidden iframe to trigger the browser print dialog without altering the main page layout.
- [Print-Optimized Layouts](https://awesome-repositories.com/f/user-interface-experience/print-optimized-layouts.md) — Generates HTML views specifically styled for physical printing by injecting custom fonts and CSS page styles. ([source](https://github.com/MatthewHerbst/react-to-print#readme))
- [Print Process Managers](https://awesome-repositories.com/f/user-interface-experience/print-process-managers.md) — Provides a set of hooks for executing asynchronous logic and updating state immediately before and after the printing process.
- [Web Component Print Support](https://awesome-repositories.com/f/user-interface-experience/print-stylesheets/web-component-print-support.md) — Extracts and renders elements from the Shadow DOM to ensure encapsulated styles are preserved in the printed output.
- [Shadow DOM Flattening](https://awesome-repositories.com/f/user-interface-experience/shadow-dom-utilities/shadow-dom-flattening.md) — Extracts elements from shadow roots and merges them into the print window to render encapsulated web component styles.
- [Shadow DOM Printing](https://awesome-repositories.com/f/user-interface-experience/shadow-dom-utilities/shadow-dom-printing.md) — Copies elements from Shadow Roots into the print window to ensure encapsulated web component styles are rendered. ([source](https://github.com/MatthewHerbst/react-to-print/blob/master/CHANGELOG.md))

### Content Management & Publishing

- [Print Pagination Controls](https://awesome-repositories.com/f/content-management-publishing/pdf-to-html-converters/pdf-to-html-converters/coordinate-based-layout-mapping/print-pagination-controls.md) — Implements precise control over page breaks, margins, and orientations to ensure correct rendering on physical paper. ([source](https://www.npmjs.com/package/react-to-print))
- [Programmatic PDF Layout Tools](https://awesome-repositories.com/f/content-management-publishing/programmatic-pdf-layout-tools.md) — Controls page breaks, margins, and CSS styles to ensure web content renders correctly on physical paper or PDF exports.

### Software Engineering & Architecture

- [DOM Node Manipulators](https://awesome-repositories.com/f/software-engineering-architecture/trees/tree-node-reorderers/dom-node-manipulators.md) — Copies target element nodes and styles from the active page into the print window for visual consistency.

### Web Development

- [DOM-to-Print Utilities](https://awesome-repositories.com/f/web-development/dom-to-print-utilities.md) — Copies DOM elements and Shadow DOM content into a printable window with custom styling.
- [Print Lifecycle Hooks](https://awesome-repositories.com/f/web-development/print-lifecycle-hooks.md) — Provides asynchronous hooks to execute custom logic and update application state before and after the print process.
- [CSS Style Injections](https://awesome-repositories.com/f/web-development/client-side-components/script-injection-mechanisms/dom-script-injection/ui-element-injection/css-style-injections.md) — Injects custom stylesheets and font families into the print document head to control margins and page breaks.
- [Pluggable Print Implementations](https://awesome-repositories.com/f/web-development/pluggable-print-implementations.md) — Allows replacing the standard browser print method with a custom function to execute printing tasks in desktop or non-browser environments. ([source](https://www.npmjs.com/package/react-to-print))