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

From smallest to largest

Desktop First

From largest to smallest

Hooks API

Styled Components

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!