diff options
Diffstat (limited to 'apps/web/src/hooks/use-mobile.tsx')
| -rw-r--r-- | apps/web/src/hooks/use-mobile.tsx | 28 |
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 } |
