Rapha Media Query

Beautiful media queries for styled-components

Installation

Using npm:

npm i @rapharacing/media-query --save

Using Yarn:

yarn add @rapharacing/media-query

Breakpoints

Default breakpoints

{
  small: '30em', // 480px
  medium: '48em', // 768px
  large: '62em' // 992px,
  xl: '75em' // 1200px
}

Example

If the project supports ECMAScript Modules, you can use the import syntax

import mq from "@rapharacing/media-query";

const Example = styled.div`
    display: flex;
    flex-direction: column;

    ${mq.md`
        flex-direction: row;
    `};
`;

Will generate the following css

.example {
    display: flex;
    flex-direction: column;

    @media (min-width: 48em) {
        flex-direction: row;
    }
}

License

Media query is freely distributable under the terms of the MIT license.