feishin/src/renderer/hooks/use-container-query.ts

import { useElementSize } from '@mantine/hooks';

interface UseContainerQueryProps {
  lg?: number;
  md?: number;
  sm?: number;
  xl?: number;
}

export const useContainerQuery = (props?: UseContainerQueryProps) => {
  const { lg, md, sm, xl } = props || {};
  const { ref, width, height } = useElementSize();

  const isXs = width >= 0;
  const isSm = width >= (sm || 600);
  const isMd = width >= (md || 768);
  const isLg = width >= (lg || 1200);
  const isXl = width >= (xl || 1500);

  return { height, isLg, isMd, isSm, isXl, isXs, ref, width };
};