mqcss

Introduction

mqcss is a media query helper.

Installation

npm install mqcss --save

yarn add mqcss

Usage

Play with it here

Example

import React from 'react'
import styled from 'styled-components'
import jss from 'jss'
import { onMobile, onTablet } from 'mqcss'

// styled-components
// Different border on mobile & table
const Wrapper = styled.div`
  border: 1px solid black;
  padding: ${p => toPx(p.padding) || '10px'};
  > * { margin: 0 5px; }

  ${onMobile} {
    border: 1px solid red;
  }

  ${onTablet} {
    border: 1px solid blue;
  }
`
// jss
// smaller font size on mobile
const styles = {
  button: {
    fontSize: 12,
    [onMobile]: {
      fontSize: 8
    }
  }
}

const {classes} = jss.createStyleSheet(styles).attach()