mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-07 04:20:12 +02:00
add 2xl, 3xl to container query hook
This commit is contained in:
@@ -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 };
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user