Simple styled components utility that you can use for building media queries.
- yarn:
yarn add styled-components-media-query
- npm:
npm i --save styled-components-media-query
import { styled, css } from 'styled-components'
import MqInit from 'styled-components-media-query'
// initialize
const bp = {s: 400, sl: 500, m: 768, ml: 992, l: 1100}
const mq = MqInit({ bp })
// use like this
const ComponentStyled = styled.div`
background: red;
// max-width(399px)
${mq(null, 's')(css`
background: green;
`)}
// between min-width(400px) and max-width(767px)
${mq('s', 'm')(css`
background: black;
`)}
// min-width(768px)
${mq('m')(css`
background: orange;
`)}
// min-width(1100px)
${mq('l')(css`
background: purple;
`)}
`
/* compiled css */
.myClass {
background: red;
}
@media only screen and (max-width: 399px) {
.myClass {
background: green;
}
}
@media only screen and (min-width: 400px) and (max-width: 767px) {
.myClass {
background: black;
}
}
@media only screen and (min-width: 768px) {
.myClass {
background: orange;
}
}
@media only screen and (min-width: 1100px) {
.myClass {
background: purple;
}
}
MqInit({ bp, type })
bp
(object): a breakpoint object (optional).type
(string): can be 'width' or 'height' (optional).
import { styled, css } from 'styled-components'
import MqInit from 'styled-components-media-query'
const bp = {s: 300, m: 500, l: 800}
// this will build min-width, max-width queries
const mqWidth = MqInit({ bp, type: 'width' })
// this will build min-height, max-height queries
const mqHeight = MqInit({ bp, type: 'height' })
If you don't pass any value when initializing MqInit
, it will use the default bp
object and type
string, which are:
const bp = {
xxxs: 0,
xxs: 200,
xs: 320,
s: 400,
sl: 500,
m: 768,
ml: 992,
l: 1100,
xl: 1200,
xxl: 1300,
xxxl: 1400,
xxxxl: 1500,
xxxxxl: 1600,
xxxxxxl: 1700,
}
const type = 'width'
You can also use mq
directly without initializing MqInit
at all, but I don't recommend using my breakpoints, always better to tailor them for the specific project.
import { styled, css } from 'styled-components'
import {mq} from 'styled-components-media-query'
const CompStyled = styled.div`
// min-width(768px)
${mq('m')(css``)}
`
mq(min, max)
min
(string|number|null): min-width or min-height value.max
(string|number|null): max-width or max-height value.
You can use the mq function to specify min-width, max-width, min-height and max-height. Examples:
import { styled, css } from 'styled-components'
import MqInit from 'styled-components-media-query'
const bp = {s: 300, m: 500, l: 800}
const mq = MqInit({ bp })
const mqHeight = MqInit({ bp, type: 'height' })
const CompStyled = styled.div`
// min-width(500px)
${mq('m')(css``)}
// max-width(500px)
${mq(null, 'm')(css``)}
// between min-width(500px) and max-width(799px)
${mq('m', 'l')(css``)}
// min-height(500px)
${mqHeight('m')(css``)}
// max-height(500px)
${mqHeight(null, 'm')(css``)}
// between min-height(500px) and max-height(799px)
${mqHeight('m', 'l')(css``)}
`
If you specify a string that is not in the bp
object, it will throw an error, however, if needed, you can pass a specific number directly:
import { styled, css } from 'styled-components'
import MqInit from 'styled-components-media-query'
const mq = MqInit()
const CompStyled = styled.div`
// min-width(300px)
${mq(300)(css``)}
// max-width(603px)
${mq(null, 603)(css``)}
// between min-width(23px) and max-width(900px)
${mq(23, 900)(css``)}
`
Also, the css
helper is not necessary, so if you want you can use mq
like this:
import { styled } from 'styled-components'
import MqInit from 'styled-components-media-query'
const mq = MqInit()
const CompStyled = styled.div`
// min-width(300px)
${mq(300)(``)} // note that 'css' helper is missing
`