Detect printing status in a react.js application.

Detect printing state such that be used within logic inside of a react.js application.

import useDetectPrint from "react-detect-print";

const Component = () => {
  const printing = useDetectPrint();
  const color = printing ? "blue" : "red";
  return (
    <div>
      Printing? <span style={{ color }}>{JSON.stringify(printing)}</span>
    </div>
  );
};

In most cases you can use media queries to adjust page content for printing. For cases in which this is not possible or extremely inconvenient, this library may fit the bill.

The library previously used the approach detailed in this blog post, but that method was deprecatd. It has been redone using window.addEventListener("beforeprint/afterprint") as well as changing the way it is used from a HOC to a hook.

npm install react-detect-print