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.
yarn install @humblebee/styled-components-breakpoint# ornpm install @humblebee/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:
down (max-width) and
only (a range between two media queries), all described in detail below.
;// Creates an object with breakpoint utility methods.const breakpoint =;
breakpoint// Will return a media query with a min-width of 768// @media only screen and (min-width: 768px)
breakpoint// Will return a media query with a max-width of 768// @media only screen and (max-width: 768px)
breakpoint// Will return a range media query between "m" and the next upper breakpoint "l"// @media only screen and (min-width: 768px) and (max-width: 1200px)
breakpoint// Will return a range media query between "m" and the breakpoint passed as the second argument, "xl"// @media only screen and (min-width: 768px) and (max-width: 1200px)
There is also a shorthand for mobile first media queries (min-width). Calling
breakpoint.m is the same as
breakpointm// 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.
. +--components | +--Button.js +--themes | +--mixins.js
;// Create an instance of styled-components-breakpoint and pass it an object of breakpoints.const breakpoint =;
// Styled Components;// Our breakpoint instance/mixin;const Button = styledbutton`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).
/ The bees at Humblebee 🐝