Breakpoint version of useMediaQuery

[runic vine]

Is there a version of https://mantine.dev/hooks/use-media-query/ where i can just pass the breakpoint name?

useBreakpoint('sm') will return true on screens sm and bigger. and false otherwise

or something of that sort

[proper lynx]

I've created a cutom hook that I use in some Mantine project : 😉

export const useCustomMediaQuery = (screenSize = 'sm') => {
  const theme = useMantineTheme();
  return useMediaQuery(`(max-width: ${theme.breakpoints[screenSize]})`);
};

With this you can pass any breakpoint from the mantine theme

[runic vine]

Ohh this is nice! This will return true uptil sm screens right?

[proper lynx]

Yes it will return true when it's on small device thanks to max-width if you want the opposite behavior use min-width