Docs
useMediaQuery

useMediaQuery

CSS media-query hook for the breakpoints defined in the theme. Returns reactive flags (isMobile, isTablet, isLaptop, ...) computed from the nearest <BreakpointsProvider /> in the tree.

const { isLaptop, isMobile, isTablet, isPortrait } = useMediaQuery();
PropertyBreakpoint (px)
isMobile<= md
isTablet> md & <= lg
isLaptop> lg & <= xl

When to use

✅ Use when…🚫 Avoid when…
  • To switch component layout/props according to the viewport.
  • To hide/show auxiliary UI on mobile.
  • For purely stylistic rules — prefer media queries in the CSS-in-JS.
  • In SSR without care: the initial value may diverge from the server until the first layout paints.
  • When a component's own responsive factory props (the sm_/md_/lg_ prefixes) already cover the breakpoint override — prefer those over branching in JS.

Changing Breakpoints

useMediaQuery uses the md, lg and xl breakpoints. To change them, pass new values to the theme:

import { ApollionProvider, createTheme } from '@apollion-dsi/core/themes';
 
<ApollionProvider
  theme={createTheme({
    breakpoints: {
      values: {
        md: 767, // default value
        lg: 990, // default value
        xl: 1200, // default value
      },
    },
  })}
>
  <App />
</ApollionProvider>;

Example

Adapting a Card's action buttons for mobile:

const { isMobile } = useMediaQuery();
 
return (
  <Card
    width={300}
    media={<Image cover height={200} src="https://picsum.photos/200?random=10" />}
    actionComponent={
      <Flex
        gap="medium"
        alignItems="center"
        justifyContent="between"
        flexDirection={isMobile ? 'column-reverse' : 'row'}
      >
        <Button size="small" color="danger" text="Delete" variant="outlined" fullWidth={isMobile} />
        <Button size="small" text="Confirm" fullWidth={isMobile} />
      </Flex>
    }
  >
    <Text variant="p">Action buttons, hooray</Text>
  </Card>
);

To see the hook in action, resize the window:

function Component() {
  const query = useMediaQuery();
 
  return (
    <pre>
      <code>{JSON.stringify(query, null, 2)}</code>
    </pre>
  );
}

See also

  • Full API: useMediaQuery (reference generated from TSDoc).
useLazyEffectuseProgress