metis-desk/packages/rdx-ui/src/hooks/use-compact-detail.ts

20 lines
460 B
TypeScript

import { useSyncExternalStore } from "react";
const COMPACT_DETAIL = "(max-width: 1099px)";
function subscribe(listener: () => void) {
const media = window.matchMedia(COMPACT_DETAIL);
media.addEventListener("change", listener);
return () => media.removeEventListener("change", listener);
}
export function useCompactDetail() {
return useSyncExternalStore(
subscribe,
() => window.matchMedia(COMPACT_DETAIL).matches,
() => false
);
}