rn-media-query-hook
Version:
React Native Media Query Hook
75 lines (74 loc) • 2.54 kB
JavaScript
import { useCallback } from "react";
import { useWindowDimensions } from "react-native";
const initialBreakPoints = {
base: 0,
sm: 480,
md: 768,
lg: 992,
xl: 1280,
};
function useMediaQuery(customBreakPoints) {
const { width } = useWindowDimensions();
const breakPoints = customBreakPoints ? customBreakPoints : initialBreakPoints;
const resultantDimension = useCallback((base, sm, md, lg, xl) => {
if (width > breakPoints.base && width <= breakPoints.sm) {
return base;
}
else if (width > breakPoints.sm && width <= breakPoints.md) {
return sm ?? base;
}
else if (width > breakPoints.md && width <= breakPoints.lg) {
return md ?? sm ?? base;
}
else if (width > breakPoints.lg && width <= breakPoints.xl) {
return lg ?? md ?? sm ?? base;
}
else {
return xl ?? lg ?? md ?? sm ?? base;
}
}, [width, breakPoints]);
const resultantValue = useCallback((base, sm, md, lg, xl) => {
if (width > breakPoints.base && width <= breakPoints.sm) {
return base;
}
else if (width > breakPoints.sm && width <= breakPoints.md) {
return sm ?? base;
}
else if (width > breakPoints.md && width <= breakPoints.lg) {
return md ?? sm ?? base;
}
else if (width > breakPoints.lg && width <= breakPoints.xl) {
return lg ?? md ?? sm ?? base;
}
else {
return xl ?? lg ?? md ?? sm ?? base;
}
}, [width, breakPoints]);
const mediaQuery = useCallback((dimensions) => {
if (Array.isArray(dimensions)) {
const [base, sm, md, lg, xl] = dimensions;
return resultantDimension(base, sm, md, lg, xl);
}
else {
const { base, sm, md, lg, xl } = dimensions;
return resultantDimension(base, sm, md, lg, xl);
}
}, [resultantDimension]);
const mediaQueryLogic = useCallback((dimensions) => {
if (Array.isArray(dimensions)) {
const [base, sm, md, lg, xl] = dimensions;
return resultantValue(base, sm, md, lg, xl);
}
else {
const { base, sm, md, lg, xl } = dimensions;
return resultantValue(base, sm, md, lg, xl);
}
}, [resultantValue]);
return {
mediaQuery,
mediaQueryLogic,
mQ: mediaQuery,
mQL: mediaQueryLogic,
};
}
export default useMediaQuery;