Re-render Reactjs components for print

Question

I have a gallery component that uses the current window size to determine how large to make the gallery items. I've also hooked the window resize events so that the gallery items are resized correctly as the window is resized.

In Chrome, if a user then prints the gallery, the items are not being resized to fit the printed page. Instead they are just using the last size calculated for the window size. This is true even when switching from portrait to landscape in the print options.

Is there any way to force react to re-render components when the print dialog is being opened and when the page layout is switched from portrait to landscape? I thought the print dialog would re-render the page with the new dimensions but that doesn't seem to be the case.

If the layout reacts to window resizing, why not just use a print CSS to resize the window and thus rearange the layout? — Elad Lachmi, Feb 01 '16 at 14:30
Is there a way to tell paper size and orientation? Otherwise I would have to hard code a single value which wouldn't always produce the correct results. — Bill, Feb 01 '16 at 19:31

score 8 · Answer 1 · edited May 23 '17 at 11:47

8

When you print a page, the browser takes a snapshot of the current DOM and applies the print media styles. Your problem is the elements on your DOM are dependent on the dimensions of the screen.

Window resize events will help to rearrange your components when the user resizes their screen but they are not triggered when the user prints. There are however ways in which you can listen to an event when the user prints the page.

window.onbeforeprint will trigger when the user prints the page. On event you either resize the screen to make the window resize events trigger or re-render your components some other way. It is not supported in chrome although take a look at this stackoverflow post, it explains how you can use window.matchMedia('print') instead.

It's always best to depend on css media queries rather than on the screen dimensions and resize events, but sometimes that is not always possible.

edited May 23 '17 at 11:47

Community

1
1

answered Feb 01 '16 at 18:35

Marc Greenstock

11,278
4
30
54

Thanks for this Marc, I have found it helpful. I have added a listener to window.matchMedia('print') within componentWillMount, which changes an 'isPrinting' property on the state to true or false depending on whether the query is matched, and then calls forceUpdate(). However, the rerender triggered by forceUpdate only happens once the print dialog is closed, at which point the media is changed again. – Thomas Hopkins Feb 11 '16 at 11:53
You're welcome @ThomasHopkins, glad I could help. That is a nice solution by the way, perhaps you could post the code for others to see how it works. – Marc Greenstock Feb 11 '16 at 12:13
1

Thanks @MarcGreenstock, but unfortunately this isn't a solution. The re-rendering that should happen on forceUpdate is only executed once the print dialog is closed, by which time it's too late! – Thomas Hopkins Feb 11 '16 at 13:20
window.onbeforeprint is now supported by Chrome (63+). https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint#browser_compatibility – Fabio Farath Jan 12 '21 at 00:24

score 4 · Answer 2 · answered Feb 02 '16 at 17:14

Use media query to target portrait and landscape print

@media print and (orientation: landscape) {
    /* landscape styles */
    /* write specific styles for landscape e.g */
    h1 {
         color: #000;
         background: none;
      }

      nav, aside {
         display: none;
      }

   }

@media print and (orientation: portrait) {
    /* portrait styles */
}

score 3 · Answer 3 · answered Aug 14 '16 at 01:07

In addition the WitVault's solution, I've created a simple React Component that makes handling complex print.css much easier. Instead of adding classes, IDs, etc. all over your markup and creating a complex print.css file, you can use my react-print library as follows:

https://github.com/captray/react-print

Add this ID to the root (or somewhere high up in your DOM tree) of your current content (but inside in the body tag)

<div id="react-no-print">

Add a div with the id of 'print-mount', or whatever mount ID you'd like to use.

<div id="print-mount"></div>

Create the structure you want for your printable version (which can include child components with their own styles to make things easier.

var PrintTemplate = require('react-print');
var ReactDOM = require('react-dom');
var React = require('react');

var MyTemplate = React.createClass({
    render() {
        return (
            <PrintTemplate>
                Your custom HTML or React Components go here, and will replace the existing HTML inside of the "react-no-print" ID, and instead it will render what's inside of your custom template.
            </PrintTemplate>
        );
    }
});

ReactDOM.render(<MyTemplate/>, document.getElementById('print-mount'));

Basically, this renders your printable version, but it's hidden until it's needed for printing. If you need this for a sliding gallery, you probably want to hook into the change event for your slider and re-render (unmount the old one, mount the new one) the print template.

Hope this helps!

hazardous · Answer 4 · 2016-02-04T11:53:22.397

You will need to use matchMedia API in your component. But doing it yourself, you will be re-inventing a whole lot of the wheel. It'd be easier to use an existing library which takes care of this. Please check out https://www.npmjs.com/package/react-responsive. It has React based wrapper components over matchMedia, so you should be able to quickly prototype it in your project. There are polyfills available too. One other advantage I can think of is that you can have a print-preview option in your interface where you can let the user preview how the gallery will look in print mode. For this you can use the server rendering feature of this library to simulate print mode.

PS: I am not affiliated with this project in any way.

Re-render Reactjs components for print

4 Answers4