React, client mobile or desktop

Asked Sep 02 '18 at 18:15

Active Sep 02 '18 at 18:15

Viewed 413 times

Building server side rendered application with React and NextJS. I want to know the width of the viewport and distribute it through the whole application via props. Getting the width of the viewport is the easy part:

window.innerWidth;

My problem is the following:

Only in the render and componentDidMount methods is the window object available.
We can't set props in the render() method because this would make the function impure
Checking to see if the viewport width in componentDidMount could work, but now we have already rendered the component.

Is there any way to get window.innerWidth before the render method is triggered?

P.S. the solution doesn't have to be passing it via props per se. It could be another solution which helps tackling this issue.

asked Sep 02 '18 at 18:15

Willem van der Veen

33,665
16
190
155

1

Maybe this is a case for context? https://reactjs.org/docs/context.html Why does your JS need to know about the viewport width? – jmargolisvt Sep 02 '18 at 18:40
So I can conditionally render components – Willem van der Veen Sep 02 '18 at 19:13
Based on the viewport – Willem van der Veen Sep 02 '18 at 19:14
Possible duplicate of [Get viewport/window height in ReactJS](https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs) – jmargolisvt Sep 02 '18 at 19:18
@WillemvanderVeen did you found a solution to this? Or is there any good solution you are using currently and would share with others having the same issue. – Gurmeet Singh Nov 05 '19 at 08:18

React, client mobile or desktop

0 Answers0