grommet: ResponsiveContext does not work with SSR
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.
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 17 (7 by maintainers)
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
i d’like to give this a go! seems interesting.
@stelian87 i think your issue is more about mismatched versions - you can clean up your node_modules and delete package.lock file and the install latest grommet and grommet-controls