Media Queries

minWidth

const Test = styled.div`
  ${minWidth(420)`
    display: flex;
  `}
`;

maxWidth

const Test = styled.div`
  ${maxWidth(420)`
    display: flex;
  `}
`;

minHeight

const Test = styled.div`
  ${minHeight(420)`
    display: flex;
  `}
`;

maxHeight

const Test = styled.div`
  ${maxHeight(420)`
    display: flex;
  `}
`;

Extend with named breakpoints

Rather than repeating yourself with the same breakpoint values, define theme once in a media query helper, and then call them by name:

// lib/styles/media.js
import { minWidth } from 'styled-tidy'

export default {
  xsmall: minWidth(400),
  small: minWidth(640),
  medium: minWidth(832),
  large: minWidth(1024),
  xlarge: minWidth(1200),
}

Then adding breakpoints is a breeze:

// my-component.js
import styled from 'styled-components'
import { rem } from 'styled-tidy'
import media from 'lib/styles/media'

const Example = styled.div`
  font-size: ${rem(14)};

  ${media.medium`
    font-size: ${rem(16)}
  `}

  ${media.large`
    font-size: ${rem(18)}
  `}
`