Guides

  • Welcome
  • Design Tokens

useMediaQuery

Edit on GitHub

Convenient css-in-js functions for using media queries in layouts.

Reference the breakpoints in theme.

import { useMediaQuery } from 'utils/useMediaQuery';
const { mq, maxBreak, minBreak } = useMediaQuery();

mq

Enables the use of responsive props anywhere.

<div
css={mq({
color: ['red', 'blue']
})}
/>

maxBreak and minBreak

Helper functions for if the array property declaration of

mq
isn't appropriate.

We prefer to use

minBreak
, as the breakpoints are designed to work upwards (mobile first).

In the (hopefully rare) case max-width is needed, we have a helper for that too.

<div
css={{
color: 'red',
[minBreak('md')]: {
color: 'blue'
}
}}
/>

  • Home
  • About
  • Blog
  • Design System
© Copyright 2021 Nathan Simpson. Made in Sydney Australia.