Awesome Open Source
Awesome Open Source


styled-breakpoints
GitHub Workflow Status coverage status npm bundle size npm downloads npm version

Simple and powerful tool for creating media queries with

styled-components Β Β Β Β ORΒ Β Β  emotion

Documentation

Examples

Getting Started

API

Examples

Mobile First

From smallest to largest

Edit mobile-first

Desktop First

From largest to smallest

Edit desktop first example

Hooks API

Styled Components

Hooks api (styled-components)

Emotion

Hooks api (Emotion)

Getting Started

Installation

npm install styled-breakpoints

# or

yarn add styled-breakpoints

Default breakpoints

{
  xs: '0px',
  sm: '576px',
  md: '768px',
  lg: '992px',
  xl: '1200px',
}
import { up, down, between, only } from 'styled-breakpoints';

const Component = styled.div`
  color: black;

  ${only('md')} {
    color: rebeccapurple;
  }
`;

Custom breakpoints

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 { down, between } from 'styled-breakpoints';

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

Hooks API

Styled Components

import { useBreakpoint } from 'styled-breakpoints/react-styled';

Emotion

import { useBreakpoint } from 'styled-breakpoints/react-emotion';


API

Core API is inspired by Bootstrap responsive breakpoints.

All incoming values are converted to em

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

up

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

down

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

/**
 *
 * @param {string} max-width
 * @param {string} [orientation]
 *
 * @return {string} media query
 */
  down('md') => '@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-width
 * @param {string} max-width
 * @param {string} [orientation]
 *
 * @return {string} media query
 */
between('md', 'lg') => '@media (min-width: 768px) and (max-width: 1199.98px) { ... }'

only

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

useBreakpoint

/**
 * @param {function} up | down | between | only
 *
 * @return {(boolean|null)} `true` if currently matching the given query,
 *                          `false` if not, and `null` if unknown (such as
 *                          during server-side rendering)
 */
useBreakpoint(up('md')) => boolean | null

Other

License

MIT License

Copyright (c) 2018-2019 Maxim Alyoshin.

This project is licensed under the MIT License - see the LICENSE 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

πŸ’» πŸ€”

samholmes

πŸ’» πŸ€”

Ontopic

πŸ€”

Ryan Bell

πŸ€”

Bart Nagel

πŸ› πŸ’» πŸ’‘ πŸ€”

Greg McKelvey

πŸ’»

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



Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (70,351)Β 
typescript (11,612)Β 
react (5,459)Β 
styled-components (238)Β 
preact (145)Β 
css-in-js (141)Β 
media (122)Β 
emotion (57)Β 
breakpoint (19)Β