Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

styled-breakpoints

8.1.1 • Public • Published

💅
styled-breakpoints
build status coverage status npm bundle size npm downloads npm version




Demo sandbox

Edit styled-breakpoints with TypeScript

Introduction

Styled Breakpoints is simple and powerful tool for creating breakpoints in Styled Components, Emotion, with TypeScript 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>;

Object notation

When using object notation, make sure to explicitly pass props to breakpoint methods. Please see the example below using default configuration:

import styled from 'styled-components';
import { down, between } from 'styled-breakpoints';
 
const Component = styled('div')(props => ({
  color: 'black',
  [down('tablet')(props)]: {
    color: 'lightcoral'
  },
  [between('sm', 'md')(props)]: {
    color: 'hotpink'
  }
}))

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) { ... }'

License

MIT License

Copyright (c) 2018-2019 Maxim Alyoshin.

This project is licensed under the MIT License - see the LICENSE.md file for details.

Contributors

Thanks goes to these wonderful people (emoji key):


Maxim

💻 🎨 📖 💡 🤔 📢

Abu Shamsutdinov

💻 💡 🤔 👀 📢

Sergey Sova

💻 💡 🤔 👀 📢

Jussi Kinnula

🐛 💻

Rafał Wyszomirski

📖

Adrian Celczyński

🐛 💻

Alexey Olefirenko

💻 🤔

This project follows the all-contributors specification. Contributions of any kind welcome!

Install

npm i styled-breakpoints

DownloadsWeekly Downloads

6,714

Version

8.1.1

License

MIT

Unpacked Size

33.1 kB

Total Files

8

Last publish

Collaborators

  • avatar