Question

61

How to use media print within Reactjs web app

rated 0 times [ 68] [ 7] / answers: 1 / hits: 15807 / 6 Years ago, thu, october 18, 2018, 12:00:00

I would like to hide a div when print preview happens but I find it almost impossible to do it in a React.

<div className=contacts></div>

Is there any possibilities that I can add pure css or if React Stylesheet supports @media print and hide element with class name contacts when print preview.

I was reading this article https://blog.logrocket.com/the-best-react-inline-style-libraries-comparing-radium-aphrodite-emotion-849ef148c473 but it just seems too much work for something that I would do poorly in css within a matter of seconds.

Any idea how can I achieve such thing in Reactjs?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

davonte

Add To Favorites

Follow

Total Points: 581

Total Questions: 101

Total Answers: 113

Location: Sudan

Member since Tue, Aug 3, 2021

3 Years ago

answered 6 Years ago mira · Accepted Answer

Inline media queries are not possible. The closest you can get is inlining a stylesheet, like so (in React syntax):

<div className=contacts>

  <style>

    {`@media print {.contacts{display: none;}}`}

  </style>

</div>