How to disable animations on mobile with react detect device?
Answered
Somali posted this in #help-forum
SomaliOP
When i use 'isMobile' or 'isDesktop' in next.js app i have hydration errors sometimes.
May be you have some lib with detect device before prerender or how i cant fix this errors?
May be you have some lib with detect device before prerender or how i cant fix this errors?
Answered by not-milo.tsx
Exactly, cause the code is executed on the server.
If your question is "How to disable animation on mobile?" you can follow my suggestions and you'll get there.
If instead you want to do this on server side, you'll have to check the user agent string of the request as shown here: https://nextjs.org/docs/messages/middleware-parse-user-agent#possible-ways-to-fix-it
isMobile and isDesktop are both powered by client side react hooks and you can only use them in the browser.If your question is "How to disable animation on mobile?" you can follow my suggestions and you'll get there.
If instead you want to do this on server side, you'll have to check the user agent string of the request as shown here: https://nextjs.org/docs/messages/middleware-parse-user-agent#possible-ways-to-fix-it
10 Replies
SomaliOP
up
You can use media queries to set the transition property of an element to
none. No js required ✨@not-milo.tsx You can use media queries to set the transition property of an element to `none`. No js required ✨
SomaliOP
but i use framer motion lib
Oh, then you'll have to use either the
reducedMotion motion config prop or the useReducedMotion hook as documented here: https://www.framer.com/motion/guide-accessibilityOr use media queries to set a css variable and then check that variable in a
useEffect hook and apply different animation objects based on that.@not-milo.tsx Oh, then you'll have to use either the `reducedMotion` motion config prop or the `useReducedMotion` hook as documented here: <https://www.framer.com/motion/guide-accessibility>
SomaliOP
thank you, but the problem is device detection
the bottom line is that on the server I cannot determine isMobile view or not through react-device-detect
the bottom line is that on the server I cannot determine isMobile view or not through react-device-detect
Exactly, cause the code is executed on the server.
If your question is "How to disable animation on mobile?" you can follow my suggestions and you'll get there.
If instead you want to do this on server side, you'll have to check the user agent string of the request as shown here: https://nextjs.org/docs/messages/middleware-parse-user-agent#possible-ways-to-fix-it
isMobile and isDesktop are both powered by client side react hooks and you can only use them in the browser.If your question is "How to disable animation on mobile?" you can follow my suggestions and you'll get there.
If instead you want to do this on server side, you'll have to check the user agent string of the request as shown here: https://nextjs.org/docs/messages/middleware-parse-user-agent#possible-ways-to-fix-it
Answer
But, this comes with a disadvantage. You'll be forced to make your pages dynamic no matter what. To get that information from the middleware to your page you'll either have to set a cookie and access it via the
cookies() dynamic function, or skip the middleware and do it on a per page basis. Either way you'll end up lengthening the response time for your pagesNo problem ✨