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

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
  );
}