use-mobile

1import * as React from "react"
2 
3const MOBILE_BREAKPOINT = 768
4 
5export function useIsMobile() {
6  const subscribe = React.useCallback((onStoreChange: () => void) => {
7    const media = window.matchMedia(
8      `(max-width: ${MOBILE_BREAKPOINT - 1}px)`
9    )
10    media.addEventListener("change", onStoreChange)
11    return () => media.removeEventListener("change", onStoreChange)
12  }, [])
13 
14  const getSnapshot = React.useCallback(
15    () => window.innerWidth < MOBILE_BREAKPOINT,
16    []
17  )
18 
19  return React.useSyncExternalStore(subscribe, getSnapshot, () => false)
20}