Utility functions for creating breakpoints in styled-components.


010.0.23 years ago3 years agoMinified + gzip package size for @intellihr/styled-components-breakpoint in KB


Commitizen friendly codecov semantic-release Travis npm npm

Styled Components Breakpoint 💅

This library provides utility functions for dealing with media queries, to make them reusable and easier to read. It can be used as an alternative to SASS/LESS mixins.

More on mixins and Styled Components in this article.


yarn install @intellihr/styled-components-breakpoint
# or
npm install @intellihr/styled-components-breakpoint

Usage and setup

The default export of styled-components-breakpoint is a function that accepts a config object of breakpoints. This will return an object with three main utility methods/mixins: up (min-width), down (max-width) and only (a range between two media queries), all described in detail below.

import styledBreakpoint from '@intellihr/styled-components-breakpoint';

 * Creates an object with breakpoint utility methods.
 * xxs: 0 ~ 319
 * xs: 320 ~ 575
 * s: 576 ~ 767
 * m: 768 ~ 991
 * l: 992 ~ 1199
 * xl: >=1200
export const breakpoint = styledBreakpoint({
  xxs: 0,
  xs: 320,
  s: 576,
  m: 768,
  l: 992,
  xl: 1200,


// Will return a media query with a min-width of 768
// @media only screen and (min-width: 768px)


// Will return a media query with a max-width of 991
// @media only screen and (max-width: 991px)


// Will return a range media query between "m" and the next upper breakpoint "l"
// @media only screen and (min-width: 768px) and (max-width: 991px)
breakpoint.only('s', 'l')
// Will return a range media query between "s" and the breakpoint passed as the second argument, "l"
// @media only screen and (min-width: 576px) and (max-width: 1199px)
breakpoint.only('m', 'xl') // Error! xl is the largest. You should use [media].up('m')


There is also a shorthand for mobile first media queries (min-width). Calling breakpoint.m is the same as breakpoint.up('m').

// Will return a media query with a min-width of 768
// @media only screen and (min-width: 768px)

Usage with styled components

In the following example we create a styled button component.

This is the folder structure we'll be working with.

|  +--Button.js
|  +--mixins.js


import styledBreakpoint from '@intellihr/styled-components-breakpoint';

// Create an instance of styled-components-breakpoint and pass it an object of breakpoints.
export const breakpoint = styledBreakpoint({
  xs: 320,
  s: 576,
  m: 768,
  l: 992,
  xl: 1200,


// Styled Components
import styled from 'styled-components';
// Our breakpoint instance/mixin
import { breakpoint } from '../../theme/mixins';

const Button = styled.button`
    background: white;
    font-size: 18px;
      font-size: 12px;
      background: palevioletred;

The first mixin breakpoint.down('s'), will give the styled button component a font size of 12px, at a breakpoint bellow "s", i.e. max-width(320px).

The second mixin breakpoint.m, uses the short hand version of breakpoint.up.('m'), and will give the button a background of palevioletred, at a breakpoint above "m", i.e. min-width(768).

Happy coding!

/ The bees at Humblebee 🐝

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.