Rendering a component differently in print

[garzohugo]

I wonder if someone can give me some usage pointers. I have a component that is collapsible on screen that I want to render in full if the page is printed. I cannot figure out a CSS approach. I put together the following render method for the component, but the page gets caught some kind of loop; it doesn't load, but doesn't throw any errors or warnings. I expect I'm making an obvious mistake. Thanks.

render() {
    return (
      <MediaQuery print={true}>
        {(matches) => matches ?
          <span>
            {// component for printing}
          </span> :
          <span>
            {// component for screen}
          </span>
        }
      </MediaQuery>
    );
  }

[yocontra]

Does using the hook fix it for you? I think I remember this issue being reported in the past but nobody was able to reproduce it

[garzohugo]

I started with the hook. Seeing as this component can render 100 times, I called the hook in a separate function and passed down the boolean to the component class. Whatever I tried broke hooke rules.

[oliviertassinari]

You can't use 'print' per browsers' limitation, e.g. Firefox. We document the limitation in https://material-ui.com/components/use-media-query/.

[ztoben]

Just a heads up for anyone who might be interested, this is now fixed in Firefox (https://hg.mozilla.org/mozilla-central/rev/164b776f5b1f).

@oliviertassinari you may want to update the documentation on the material-ui site 😄

[yocontra]

Seems like this is fixed now, closing.