media-query-helper v0.0.2

media-query-helper

Helper functions for using media queries in styled-components.

Usage

import styled from 'styled-components';
import media from `media-query-helper`;
import React from 'react';
import ReactDOM from 'react-dom';

media.config({
  sizes: {
    large: { min: 980, max: 1279 }
  }
});

const StyledButton = styled.button`
  border-radius: 5px;
  font-size: ${props => props.fontSize};
  color: red;

  ${media.lessThan('large')`
    color: pink;
    font-size: ${props => props.largeFontSize}
  `}
`;

ReactDOM.render(<StyledButton fontSize="1rem" largeFontSize="2rem" />);