Package Exports

styled-breakpoints
styled-breakpoints/core

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

Simple and powerful tool for creating media queries with

Documentation

Examples

mobile first
desktop first
hooks api

Getting Started

Installation
default breakpoints
custom breakpoints
object notation

API

up
down
between
only
useBreakpoint

Examples

Mobile First

Desktop First

Hooks API

Styled Components

Emotion

Getting Started

Installation

yarn i styled-breakpoints

# or

yarn 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

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} 🐛 💻 💡 🤔

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