Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ResponsiveContext does not work with SSR

See original GitHub issue

the first ResponsiveContext.Consumer call is with size = undefined. When rendering server-side, the page does not know if it will be displayed for mobile or desktop - some components are visible or hidden while they shouldnt be and then on the first client-side render, the page updates with the correct screen size

One possible solution is to use User-Agent and make an educated guess as to the screen size server-side so the initial render is correct.

Issue Analytics

State:
Created 5 years ago
Comments:17 (7 by maintainers)

Top GitHub Comments

1reaction

atanasstercommented, Nov 29, 2018

We can use something like the bootstrap breakpoints sizes:

Phones - less than 768px Tablets - 768px to 992px Desktops - 992px to 1200px Large Desktops - 1200px and Up

1reaction

oorestisimecommented, Nov 28, 2018

i d’like to give this a go! seems interesting.

Top Results From Across the Web

react-responsive doesn't work with Server-side rendering

Show activity on this post. I am trying to use react-responsive to conditional rendering components base on device width. Everything worked ...

react-responsive doesn't work with Server-side rendering ...

Coding example for the question react-responsive doesn't work with Server-side ... import { Context as ResponsiveContext } from 'react-responsive'; .

react-responsive - npm

This is especially useful in a Node environment where these settings can't be detected (SSR) or for testing. Possible Keys. orientation , scan...

Responsive Context - Grommet

children. Render function that will be called with the current viewport size (e.g our base theme of size ...

npm:react-responsive-ssr | Skypack

Note: react-responsive-ssr has a peer dependency to react , react-dom , prop-types , react-responsive and mobile-detect , so don't forget to install those ......