Skip to content

tacomanator/react-detect-print

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-detect-print

Detect printing status in a react.js application.

What

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

Example

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>
  );
};

Should I use this?

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.

Approach

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.

Installation

npm install react-detect-print

Releases

No releases published

Packages

No packages published