Use Mobile

1import { useSyncExternalStore } from "react";
2 
3const MOBILE_BREAKPOINT = 768;
4 
5const subscribe = (onStoreChange: () => void) => {
6  const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
7  mql.addEventListener("change", onStoreChange);
8  return () => mql.removeEventListener("change", onStoreChange);
9};
10 
11export const useIsMobile = () =>
12  useSyncExternalStore(
13    subscribe,
14    () => window.innerWidth < MOBILE_BREAKPOINT,
15    () => false,
16  );