@pagamio/frontend-commons-lib/lib/shared/hooks/useMediaQueries.js

Pagamio library for Frontend reusable components like the form engine and table container

import { useMantineTheme } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
export function useMediaQueries() {
    const theme = useMantineTheme();
    function convertToPx(value) {
        const breakpointRegex = /^([\d.]+)(em|rem|px)$/;
        const match = breakpointRegex.exec(value);
        if (!match) {
            console.error(`Unsupported unit in breakpoint value: "${value}"`);
            return NaN;
        }
        const [, numericValue, unit] = match;
        const num = parseFloat(numericValue);
        switch (unit) {
            case 'px':
                return num;
            case 'em':
            case 'rem':
                return num * 16;
            default:
                console.error(`Unsupported unit: "${unit}"`);
                return NaN;
        }
    }
    const xsPx = convertToPx(theme.breakpoints.xs);
    const smPx = convertToPx(theme.breakpoints.sm);
    const isXs = useMediaQuery(`(max-width: ${xsPx - 1}px)`);
    const isSm = useMediaQuery(`(min-width: ${xsPx}px) and (max-width: ${smPx - 1}px)`);
    const isMd = useMediaQuery(`(min-width: ${smPx}px)`);
    return {
        isXs,
        isSm,
        isMd,
    };
}