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.

This is achieved using Emotion's facepaint library.

mq itself is useMediaQuery()'s theme-aware wrapper around makeMq, also exported directly — reach for makeMq(breakpoints) if you need the same array-of-values behaviour against an arbitrary set of breakpoints instead of the theme's.

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.

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.

Visible

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