add 2xl, 3xl to container query hook

This commit is contained in:
jeffvli
2025-09-28 19:17:24 -07:00
parent 5ff9efb7d6
commit 77bd483ce4
+6 -2
View File
@@ -1,6 +1,8 @@
import { useElementSize } from '@mantine/hooks'; import { useElementSize } from '@mantine/hooks';
interface UseContainerQueryProps { interface UseContainerQueryProps {
'2xl'?: number;
'3xl'?: number;
lg?: number; lg?: number;
md?: number; md?: number;
sm?: number; sm?: number;
@@ -8,7 +10,7 @@ interface UseContainerQueryProps {
} }
export const useContainerQuery = (props?: UseContainerQueryProps) => { export const useContainerQuery = (props?: UseContainerQueryProps) => {
const { lg, md, sm, xl } = props || {}; const { '2xl': xxl, '3xl': xxxl, lg, md, sm, xl } = props || {};
const { height, ref, width } = useElementSize(); const { height, ref, width } = useElementSize();
const isXs = width >= 0; const isXs = width >= 0;
@@ -16,6 +18,8 @@ export const useContainerQuery = (props?: UseContainerQueryProps) => {
const isMd = width >= (md || 768); const isMd = width >= (md || 768);
const isLg = width >= (lg || 1200); const isLg = width >= (lg || 1200);
const isXl = width >= (xl || 1500); const isXl = width >= (xl || 1500);
const is2xl = width >= (xxl || 1920);
const is3xl = width >= (xxxl || 2560);
return { height, isLg, isMd, isSm, isXl, isXs, ref, width }; return { height, is2xl, is3xl, isLg, isMd, isSm, isXl, isXs, ref, width };
}; };