Media Query

Hook

Import the useMediaQuery hook from the media-query package.

import { useMediaQuery } from '@balance-web/media-query';

Responsive values

To target a specific value that should change across breakpoints use the mq utility function. You can pass in a standard CSS object, and array values will be applied to their respective breakpoints.

Note that if a value is repeated across several breakpoints, a null value can be used to prevent generating unnecessary CSS.

const { colors } = useTheme();
const { mq } = useMediaQuery();
return (
  <Box
    css={mq({
      background: [colors.text, null, null, colors.primary],
      height: [32, null, null, 48, 64],
      width: [32, null, null, 48, 64],
    })}
  />
);

This is achieved using Emotion's facepaint library.

Min / Max

For granular control over a group of styles use the minBreak and maxBreak utility functions. They accept a single argument, which must be one of the breakpoint keys supplied to the theme.

const { colors } = useTheme();
const { maxBreak, minBreak } = useMediaQuery();
return (
  <Box
    css={{
      background: colors.primary,
      height: 48,
      width: 48,
      [minBreak('xlarge')]: {
        background: colors.accent,
        height: 64,
        width: 64,
      },
      [maxBreak('large')]: {
        background: colors.text,
        height: 32,
        width: 32,
      },
    }}
  />
);

Components

Import the Hidden and Visible components from the media-query package.

import { Hidden, Visible } from '@balance-web/media-query';

For faster development, use the responsive display components for showing and hiding elements by device. Avoid creating entirely different versions of the same app, instead show/hide elements responsively per breakpoint.

Hidden

Optionally hide an element, or elements, for a given screen size. Resize your browser window to see the elements show/hide.

<>
  <Hidden below="large">
    <EyeOffIcon color="base" />
  </Hidden>
  <Hidden above="large">
    <EyeIcon color="base" />
  </Hidden>
</>

Visible

Optionally show an element, or elements, for a given screen size. Resize your browser window to see the elements show/hide.

<>
  <Visible below="large">
    <EyeOffIcon color="base" />
  </Visible>
  <Visible above="large">
    <EyeIcon color="base" />
  </Visible>
</>