@caiodev/styled-media v2.0.2

styled-media 💅

Create breakpoints within styled-components as easily and quickly as possible 💅

Installation

yarn

yarn add @caiodev/styled-media

npm

npm i @caiodev/styled-media

Usage

The default breakpoints are the following:

const breakpoints = {
  phone: '420px',
  tablet: '768px',
  desktop: '1200px'
}

Example - with default breakpoint

import styled, { css } from 'styled-components'
import media from '@caiodev/styled-media'

const Header = styled.header`
  width: 100%;
  height: 64px;

  ${media.lessThan(
    'tablet',
    css`
      height: 48px;
    `
  )}
`

const Footer = styled.footer`
  width: 100%;
  height: 64px;

  ${media.greaterThan(
    'desktop',
    css`
      height: 80px;
    `
  )}
`

Example - with custom breakpoints

import styled, { css } from 'styled-components'
import media from '@caiodev/styled-media'

const Header = styled.header`
  width: 100%;
  height: 64px;

  ${media.lessThan(
    600,
    css`
      height: 48px;
    `
  )}
`

const Footer = styled.footer`
  width: 100%;
  height: 64px;

  ${media.greaterThan(
    600,
    css`
      height: 80px;
    `
  )}
`