React higher-order component to detect printing.
Switch branches/tags
Nothing to show
Clone or download
Latest commit ce6bf76 Jul 7, 2017


React higher-order component (HOC) to detect when a page is being printed.


Use as a HOC to receive a printing prop, which will be true if the page is being printed and false otherwise.


import React from "react";
import ReactDOM from "react-dom";
import detectPrint from "react-detect-print";

const App = props => <div>Printing? {JSON.stringify(props.printing)}</div>;

const EnhancedApp = detectPrint(App);

ReactDOM.render(<EnhancedApp />, document.getElementById("..."));

See react-detect-print-example for a more in-depth example.

Should I use this?

The general recommendation is to use media queries instead. For those times when that won't work, this may fit the bill. However, it has not been widely tested so use at your own risk. It was adapted using approach detailed in this blog post.


npm install --save react-detect-print


Adopted from post by TJ VanToll.