27 lines
760 B
TypeScript
27 lines
760 B
TypeScript
import * as React from "react";
|
|
|
|
const MOBILE_BREAKPOINT = 768;
|
|
const MOBILE_MEDIA_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`;
|
|
|
|
export function useIsMobile() {
|
|
const subscribe = React.useCallback((onStoreChange: () => void) => {
|
|
if (typeof window === "undefined") {
|
|
return () => {};
|
|
}
|
|
|
|
const mediaQueryList = window.matchMedia(MOBILE_MEDIA_QUERY);
|
|
mediaQueryList.addEventListener("change", onStoreChange);
|
|
return () => mediaQueryList.removeEventListener("change", onStoreChange);
|
|
}, []);
|
|
|
|
const getSnapshot = React.useCallback(() => {
|
|
if (typeof window === "undefined") {
|
|
return false;
|
|
}
|
|
|
|
return window.matchMedia(MOBILE_MEDIA_QUERY).matches;
|
|
}, []);
|
|
|
|
return React.useSyncExternalStore(subscribe, getSnapshot, () => false);
|
|
}
|