MediaQuery

Apply styles to children if media query matches

Import

Source

View source code

Docs

Edit this page

Package

@asuikit/core

Usage

MediaQuery component adds styles to child element if given media query matches:

(max-width: 75em) and (min-width: 50em) breakpoints

import { MediaQuery, Text, rem } from '@asuikit/core';

function Demo() {
  return (
    <MediaQuery
      query="(max-width: 75em) and (min-width: 50em)"
      styles={{ fontSize: rem(20), '&:hover': { backgroundColor: 'silver' } }}
    >
      <Text>(max-width: 75em) and (min-width: 50em) breakpoints</Text>
    </MediaQuery>
  );
}

Usage with theme

(max-width: 75em) and (min-width: 50em) breakpoints

import { MediaQuery, Text } from '@asuikit/core';

function Demo() {
  return (
    <MediaQuery
      query="(max-width: 75em) and (min-width: 50em)"
      styles={(theme) => ({
        fontSize: theme.fontSizes.lg,
        '&:hover': { backgroundColor: theme.fn.primaryColor(), color: theme.white },
      })}
    >
      <Text>(max-width: 75em) and (min-width: 50em) breakpoints</Text>
    </MediaQuery>
  );
}

largerThan and smallerThan props

largerThan and smallerThan props lets you use theme.breakpoints:

- larger than lg

- Smaller than lg

- Smaller than xl, larger than sm

- Smaller than 1500, larger than 800

import { useMantineTheme, MediaQuery, Stack, Box, CSSObject, rem } from '@asuikit/core';

function Demo() {
  const theme = useMantineTheme();

  const highlight: CSSObject = {
    backgroundColor:
      theme.colorScheme === 'dark'
        ? theme.fn.rgba(theme.colors.blue[7], 0.25)
        : theme.colors.blue[0],
    border: `${rem(1)} solid ${
      theme.colorScheme === 'dark' ? theme.colors.blue[6] : theme.colors.blue[3]
    }`,
  };

  const boxStyles = {
    borderRadius: theme.radius.sm,
    padding: `${rem(3)} ${rem(5)}`,
    border: `${rem(1)} solid transparent`,
  };

  return (
    <Stack spacing={5}>
      <MediaQuery largerThan="lg" styles={highlight}>
        <Box sx={boxStyles}>- larger than lg</Box>
      </MediaQuery>
      <MediaQuery smallerThan="lg" styles={highlight}>
        <Box sx={boxStyles}>- Smaller than lg</Box>
      </MediaQuery>
      <MediaQuery smallerThan="xl" largerThan="sm" styles={highlight}>
        <Box sx={boxStyles}>- Smaller than xl, larger than sm</Box>
      </MediaQuery>
      <MediaQuery smallerThan={1500} largerThan={800} styles={highlight}>
        <Box sx={boxStyles}>- Smaller than 1500, larger than 800</Box>
      </MediaQuery>
    </Stack>
  );
}

Configure breakpoints

Default breakpoints:

Breakpoint	Viewport width
xs	36em
sm	48em
md	62em
lg	75em
xl	88em

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

import { MantineProvider } from '@asuikit/core';

function Demo() {
  return (
    <MantineProvider
      withGlobalStyles
      withNormalizeCSS
      theme={{
        breakpoints: {
          xs: '30em',
          sm: '48em',
          md: '64em',
          lg: '74em',
          xl: '90em',
        },
      }}
    >
      <App />
    </MantineProvider>
  );
}

MediaQuery children

MediaQuery always work with single child and uses className prop to add styles, child component must accept it otherwise styles will not 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>

!important MediaQuery will work only with React elements. Strings, numbers, fragments and other parts will not have correct styles:

// Invalid MediaQuery usage, do not do this
import { MediaQuery } from '@asuikit/core';

function InvalidDemo() {
  return <MediaQuery>No styles applied</MediaQuery>;
}

Go back

Group – @asuikit/core

Up next

SimpleGrid – @asuikit/core

MediaQuery component props

Name	Type	Description
children^*	ReactNode	Child that should be shown at given breakpoint, it must accept className prop
largerThan	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Styles applied to child when viewport is larger than given breakpoint
query	string	Any other media query
smallerThan	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Styles applied to child when viewport is smaller than given breakpoint

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on GitHub GitHub discussions

Project

Mantine UI Documentation GitHub organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter