Use hook for responsive

Vizzuality · Oct 23, 2024 · 0998dc0 · 0998dc0
1 parent 2296ca8
commit 0998dc0
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 33 deletions.
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "re-resizable": "^6.10.0",
     "react": "18",
     "react-dom": "18",
+    "react-responsive": "^10.0.0",
     "recoil": "^0.7.7",
     "tailwind-merge": "2.4.0",
     "tailwindcss-animate": "1.0.7",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/lib/hooks.ts b/src/lib/hooks.ts
@@ -1,4 +1,5 @@
 import { useState, useCallback, useEffect } from "react";
+import { useMediaQuery } from "react-responsive";
 
 export const useScreenWidthWithResize = () => {
   const [width, setWidth] = useState(0);
@@ -20,17 +21,8 @@ export const useScreenWidthWithResize = () => {
 };
 
 export const useIsMobile = () => {
-  const [isMobile, setIsMobile] = useState(false);
-  const handleResize = useCallback(() => {
-    // Use desktop breakpoint to allow for big screen mobiles
-    setIsMobile(window.innerWidth < 1024);
-  }, []);
-
-  useEffect(() => {
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-
-  return isMobile;
+  const isDesktopOrLaptop = useMediaQuery({
+    query: "(min-width: 1224px)",
+  });
+  return !isDesktopOrLaptop;
 };