@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
37 lines (36 loc) • 1.25 kB
JavaScript
"use client";
import { useMantineTheme } from "../MantineThemeProvider/MantineThemeProvider.mjs";
import { useMediaQuery } from "@mantine/hooks";
//#region packages/@mantine/core/src/core/MantineProvider/use-matches/use-matches.ts
const BREAKPOINTS = [
"xs",
"sm",
"md",
"lg",
"xl"
];
function getFirstMatchingValue(value, biggestMatch) {
if (!biggestMatch) return value.base;
let index = BREAKPOINTS.indexOf(biggestMatch);
while (index >= 0) {
if (BREAKPOINTS[index] in value) return value[BREAKPOINTS[index]];
index -= 1;
}
return value.base;
}
function getFirstMatchingBreakpoint(matches) {
return matches.findLastIndex((v) => v);
}
function useMatches(payload, options) {
const theme = useMantineTheme();
return getFirstMatchingValue(payload, BREAKPOINTS[getFirstMatchingBreakpoint([
useMediaQuery(`(min-width: ${theme.breakpoints.xs})`, false, options),
useMediaQuery(`(min-width: ${theme.breakpoints.sm})`, false, options),
useMediaQuery(`(min-width: ${theme.breakpoints.md})`, false, options),
useMediaQuery(`(min-width: ${theme.breakpoints.lg})`, false, options),
useMediaQuery(`(min-width: ${theme.breakpoints.xl})`, false, options)
])]);
}
//#endregion
export { useMatches };
//# sourceMappingURL=use-matches.mjs.map