💅
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.
Installation
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,
});
Up
breakpoint.up('m')
// Will return a media query with a min-width of 768
// @media only screen and (min-width: 768px)
Down
breakpoint.down('m')
// Will return a media query with a max-width of 991
// @media only screen and (max-width: 991px)
Only
breakpoint.only('m')
// 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')
Shorthand
There is also a shorthand for mobile first media queries (min-width). Calling breakpoint.m
is the same as breakpoint.up('m')
.
breakpoint.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.
.
+--components
| +--Button.js
+--themes
| +--mixins.js
themes/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,
});
components/Button.js
// 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;
${breakpoint.down('s')}`
font-size: 12px;
`
${breakpoint.m}`
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