summaryrefslogtreecommitdiff
path: root/hooks/use-mobile.tsx
diff options
context:
space:
mode:
authorYuren Hao <97327730+YurenHao0426@users.noreply.github.com>2025-02-02 23:59:29 -0600
committerGitHub <noreply@github.com>2025-02-02 23:59:29 -0600
commit1774317d667aed94b2a2f0acae885ce9420de8e2 (patch)
tree71ca71920e68a43536bc58085ebc96e193db776a /hooks/use-mobile.tsx
Add files via uploadHEADmain
initialization
Diffstat (limited to 'hooks/use-mobile.tsx')
-rw-r--r--hooks/use-mobile.tsx19
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
+}