Comments (8)
I understand that adjusting the default may rectify the 'flicker' effect when a page is re-rendered due detecting the browser's user-agent; however, in this case the view is set to the default (in this case desktop) and never re-renders correctly. In our testing using chrome tools, if we refresh while having the user-agent set to any of the mobile devices, the breakpoint defaults to desktop but does not correct itself. It remains desktop which is unexpected. All that said we think this is a great library and would love to get it to work for us. Thanks for your work on this.
from react-socks.
I have created a screen cast which illustrates what we see in our testing where refreshing a mobile user-agent defaults to the desktop className/CSS but never corrects itself to the mobile className/CSS as set in the mobile breakpoint. The code utilized in this cast is the same as what was provided in the pdf. The CSS for the desktop breakpoint is blue. The CSS for the tablet break point is red, and mobile is orange. If we are doing something incorrect in our implementation of this package, please let us know. Thanks.
Link:
https://drive.google.com/file/d/1LlYvIiKUr-3Hktgj6AHNtORQWYsI4hok/view
from react-socks.
Any progress on this? we are using styled components and have started using gatsby and we have the same issue where the mobile breakpoints are not triggered.
from react-socks.
This happens because of the default fallback. The code checks for browser agent. If the browser agent is not there (which is the case during server render) the lib falls back to desktop as the default. The correct view will be rendered in the browser once the app is hydrated but the lag between initial paint and hydration will still have the default desktop fallback.
The solution for this is simple — make the default configurable (desktop/mobile/none).
However the problem will still persist as it will either be desktop or mobile unless the server knows and controls the render by setting the right default using the browser agent string in the request.
from react-socks.
@thedern I get it now. Thanks for attaching the video to demonstrate the issue. Looks like the styles are not hydrating properly. This might be an issue with the style library itself and not react-socks
but I will double check this in a Next.js project to see what's happening there.
Can you add more details about your project setup? As far as I can tell you are using Next.js with css-modules. Or is it styled-components? Pl add in as much details as possible and I'll try to recreate the issue to debug it. Better if you could create a repo and share it here. Thanks much.
from react-socks.
there is the code repo you requested:
https://github.com/thedern/next-react-socks-example
We are using CSS modules and not styled components for this project. I greatly appreciate you looking into this for us.
from react-socks.
Got same error, looks like we need to tell to hydrate
that you need to rerender breakpoints.
One thing you can do is to hide some elements till it is loaded on client side using some isServer
var. But you if you actually want them to be displayed before hydrate
, it is not an option (for examle for SEO).
from react-socks.
I also encountered this error. Does anyone got a solution?
from react-socks.
Related Issues (20)
- Tests fail HOT 1
- Cannot Resolve Symbol 'BreakpointProvider' HOT 2
- Any thought of adding `style` to a Breakpoint? HOT 1
- Debounce should cancel in ComponentWillUnmount HOT 2
- TypeScript typings? HOT 3
- { setDefaultBreakpoints } is not working properly
- Component Flashes on Screen HOT 5
- Styling on Mobile in build is lost HOT 5
- v2.0.0 - Typings issue for Breakpoint and useCurrentWidth/useCurrentBreakpointName HOT 14
- Handling height HOT 7
- Consider throttling the window resize event HOT 2
- Server side rendering wrong css styles HOT 9
- TypeError: Super expression must either be null or a function HOT 8
- Class name for undefined breakpoint HOT 3
- `window.removeEventListener` isn't removing the event listener HOT 2
- Not working with Swiper
- Typescript error with `style` prop
- Server-side rendering issue HOT 2
- We could use `matchMedia` to pass in custom media queries HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-socks.