summaryrefslogtreecommitdiff
path: root/apps/web/src/hooks/use-mobile.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web/src/hooks/use-mobile.tsx')
-rw-r--r--apps/web/src/hooks/use-mobile.tsx28
1 files changed, 13 insertions, 15 deletions
diff --git a/apps/web/src/hooks/use-mobile.tsx b/apps/web/src/hooks/use-mobile.tsx
index 0a892310..2b0fe1df 100644
--- a/apps/web/src/hooks/use-mobile.tsx
+++ b/apps/web/src/hooks/use-mobile.tsx
@@ -1,21 +1,19 @@
-import * as React from "react";
+import * as React from "react"
-const MOBILE_BREAKPOINT = 768;
+const MOBILE_BREAKPOINT = 768
export function useIsMobile() {
- const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
- undefined,
- );
+ const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
- React.useEffect(() => {
- const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
- const onChange = () => {
- setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
- };
- mql.addEventListener("change", onChange);
- setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
- return () => mql.removeEventListener("change", onChange);
- }, []);
+ React.useEffect(() => {
+ const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+ const onChange = () => {
+ setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+ }
+ mql.addEventListener("change", onChange)
+ setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+ return () => mql.removeEventListener("change", onChange)
+ }, [])
- return !!isMobile;
+ return !!isMobile
}