MediaQuery

Hide children if viewport size does not match given value
Import

Usage

MediaQuery hides child element if does not match given viewport size. Elements are hidden with display: none. Resize browser to see badges appearing at specified breakpoints:

Larger than lg
Smaller than lg
Smaller than xl, larger than sm
Smaller than 1500px, larger than 800px
<MediaQuery largerThan="lg">
<Badge>Larger than lg</Badge>
</MediaQuery>
<MediaQuery smallerThan="lg">
<Badge color="red">Smaller than lg</Badge>
</MediaQuery>
<MediaQuery smallerThan="xl" largerThan="sm">
<Badge color="pink">Smaller than xl, larger than sm</Badge>
</MediaQuery>
<MediaQuery smallerThan={1500} largerThan={800}>
<Badge color="cyan">Smaller than 1500px, larger than 800px</Badge>
</MediaQuery>

MediaQuery children

MediaQuery always work with single child and uses className prop to add styles, child component must accept it otherwise unexpected negative margins will be applied the element:

// Will not work with MediaQuery – component does not handle className
const MyButton => ({ label }) => <button>{label}</button>
// Will work with MediaQuery – handle className
const MyButton => ({ label, className }) => <button className={className}>{label}</button>
// Will work with MediaQuery – handle className
const MyButton => ({ label, ...others }) => <button {...others}>{label}</button>

Configure breakpoints

Mantine uses Bootstrap's breakpoint values as defaults:

BreakpointViewport width
xs576px
sm768px
md992px
lg1200px
xl1400px

To change these values wrap your application with MantineProvider and set breakpoints prop on theme:

import { MantineProvider } from '@mantine/core';
function YourApp() {
return (
<MantineProvider
theme={{
breakpoints: {
xs: 500,
sm: 800,
md: 1000,
lg: 1275,
xl: 1800,
},
}}
>
Hello World
</MantineProvider>
);
}

TypeScript

Import component props type:

import type { MediaQueryProps } from '@mantine/core';

MediaQueryProps does not extends any interfaces, props descriptions are available under Component props tab.

Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback