Merge pull request #58 from deriv-com/shayan/update-breakpoints

refactor: updated breakpoints in useDevice hook
deriv-com · Feb 5, 2024 · 4253894 · 4253894
2 parents 1881481 + 88f2c6e
commit 4253894
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/lib/hooks/useDevice.ts b/lib/hooks/useDevice.ts
@@ -2,10 +2,15 @@ import { useMediaQuery } from "./useMediaQuery";
 
 /** A custom hook to check for the client device and determine the layout to be rendered */
 export const useDevice = () => {
-    const isDesktop = useMediaQuery(`(min-width: 1024px)`);
-    const isMobile = useMediaQuery(`(max-width: 768px)`);
+    const isDesktop = useMediaQuery(`(min-width: 1280px)`);
+    const isMobile = useMediaQuery(`(max-width: 600px)`);
+    const isTablet = useMediaQuery(`(min-width: 601px) and (max-width: 1279px)`);
     return {
+        /** returns Larger screen tablets [min-width: 1280px] */
         isDesktop,
+        /**  returns Smaller screen tablets [max-width: 600px] */
         isMobile,
+        /** returns Larger screen phones and smaller screen desktop [min-width: 601px and max-width: 1279px] */
+        isTablet
     };
 };