It’s a higher order component that sends a
printing prop with a value of
false to the wrapped component, indicating the state of printing. The approach to detect printing is adapted from this blog post. It hasn’t been widely tested and probably has issues, so use at your own risk.
Check out react-detect-print-example. The printed page size is set to letter (see
/src/index.css), which seems to require a width of 816 pixels to fit perfectly on a page (96dpi x 8.5in). Landscape orientation is not (yet?) handled by the library. Running the example should show a page like the following:
However, when printing, you should see the value of the
printing flag change to
true. The change in prop value can be used to cause children to re-render, updating themselves for the printed page: