diff options
| author | Yuren Hao <97327730+YurenHao0426@users.noreply.github.com> | 2025-02-02 23:59:29 -0600 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-02-02 23:59:29 -0600 |
| commit | 1774317d667aed94b2a2f0acae885ce9420de8e2 (patch) | |
| tree | 71ca71920e68a43536bc58085ebc96e193db776a /hooks/use-mobile.tsx | |
initialization
Diffstat (limited to 'hooks/use-mobile.tsx')
| -rw-r--r-- | hooks/use-mobile.tsx | 19 |
1 files changed, 19 insertions, 0 deletions
diff --git a/hooks/use-mobile.tsx b/hooks/use-mobile.tsx new file mode 100644 index 0000000..2b0fe1d --- /dev/null +++ b/hooks/use-mobile.tsx @@ -0,0 +1,19 @@ +import * as React from "react" + +const MOBILE_BREAKPOINT = 768 + +export function useIsMobile() { + 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) + }, []) + + return !!isMobile +} |
