Package Exports

styled-breakpoints

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (styled-breakpoints) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

💅
styled-breakpoints

Demo sandbox

Introduction

Styled Breakpoints is simple and powerful tool for creating breakpoints in Styled Components, Emotion, Linaria and Astroturf with TypeScript and Flow type annotations out of the box.

Installation

yarn add styled-breakpoints

npm i styled-breakpoints

Usage

With Default breakpoints

{
  tablet: '768px',
  desktop: '992px',
  lgDesktop: '1200px',
}

import styled from 'styled-components';
import { up, down, between, only } from 'styled-breakpoints';

const Component = styled.div`
  color: black;

  ${down('tablet')} {
    color: lightcoral;
  }

  ${only('tablet')} {
    color: rebeccapurple;
  }

  ${between('tablet', 'desktop')} {
    color: hotpink;
  }

  ${up('lgDesktop')} {
    color: hotpink;
  }
`;

Custom breakpoints

Breakpoints like Bootstrap responsive breakpoints.

import React from 'react';
import styled, { ThemeProvider } from 'styled-components';
import { up, down, between, only } from 'styled-breakpoints';

const theme = {
  breakpoints: {
    sm: '576px',
    md: '768px',
    lg: '992px',
    xl: '1200px',
  },
};

const Component = styled.div`
  color: black;

  ${only('sm')} {
    color: rebeccapurple;
  }

  ${between('sm', 'md')} {
    color: hotpink;
  }

  ${down('lg')} {
    color: lightcoral;
  }

  ${up('xl')} {
    color: hotpink;
  }
`;

<ThemeProvider theme={theme}>
  <Component>This is cool!</Component>
</ThemeProvider>;

API

All incoming values are converted to em.

For example, let's take default values of breakpoints.

up

/**
 *
 * @param {string} breakpoint name
 * @param {string} [orientation]
 *
 * @return {string} media quiery
 */
up('tablet') => '@media (min-width: 768px) { ... }'

down

We occasionally use media queries that go in the other direction (the given screen size or smaller):

/**
 *
 * @param {string} breakpoint name
 * @param {string} [orientation]
 *
 * @return {string} media quiery
 */
  down('tablet') => '@media (max-width: 991.98px) { ... }'

Note that since browsers do not currently support range context queries, we work around the limitations of min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.

Similarly, media queries may span multiple breakpoint widths:

between

/**
 *
 * @param {string} min breakpoint name
 * @param {string} max breakpoint name
 * @param {string} [orientation]
 *
 * @return {string} media quiery
 */
between('tablet', 'desktop') => '@media (min-width: 768px) and (max-width: 1199.98px) { ... }'

only

/**
 *
 * @param {string} breakpoint name
 * @param {string} [orientation]
 *
 * @return {string} media quiery
 */
only('tablet') => '@media (min-width: 768px) and (max-width: 991.98px) { ... }'