37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import { useSyncExternalStore } from "react"
|
||
|
||
const subscribeMediaQuery = (query: string) => (callback: () => void) => {
|
||
if (typeof window === "undefined") return () => {}
|
||
const mql = window.matchMedia(query)
|
||
mql.addEventListener("change", callback)
|
||
return () => mql.removeEventListener("change", callback)
|
||
}
|
||
|
||
const getMediaQuerySnapshot = (query: string) => () => {
|
||
if (typeof window === "undefined") return false
|
||
return window.matchMedia(query).matches
|
||
}
|
||
|
||
export function useMediaQuery(query: string): boolean {
|
||
return useSyncExternalStore(
|
||
subscribeMediaQuery(query),
|
||
getMediaQuerySnapshot(query),
|
||
() => false,
|
||
)
|
||
}
|
||
|
||
// 移动端：< 768px（对应 Tailwind md 断点以下）
|
||
export function useIsMobile(): boolean {
|
||
return useMediaQuery("(max-width: 47.999rem)")
|
||
}
|
||
|
||
// 桌面端：>= 768px
|
||
export function useIsDesktop(): boolean {
|
||
return useMediaQuery("(min-width: 48rem)")
|
||
}
|
||
|
||
// 窄桌面/平板横屏：< 1280px（对应 Tailwind xl 断点以下）
|
||
export function useIsNarrowDesktop(): boolean {
|
||
return useMediaQuery("(max-width: 79.999rem)")
|
||
}
|