Balance Logo
Balance
Reckon Design System

Media Query

Hooks and components for conveniently managing media-queries.
Install
pnpm add @reckon-web/media-query
Import usage
import {
Hidden,
Visible,
useMediaQuery
} from '@reckon-web/media-query';
  • Code
  • API

Hook

Import the useMediaQuery hook from the media-query package.

import { useMediaQuery } from '@reckon-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.

Open in Playroom

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.

Components

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

import { Hidden, Visible } from '@reckon-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.

Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.