Styled components media query
Simple styled components utility that you can use for building media queries.
Install
- yarn:
yarn add styled-components-media-query
- npm:
npm i --save styled-components-media-query
Usage
// initializeconst bp = s: 400 sl: 500 m: 768 ml: 992 l: 1100const mq = // use like thisconst ComponentStyled = styleddiv` background: red; // max-width(399px) // between min-width(400px) and max-width(767px) // min-width(768px) // min-width(1100px) `
/* compiled css */{}{}{}{}
Api
MqInit({ bp, type })
bp
(object): a breakpoint object (optional).type
(string): can be 'width' or 'height' (optional).
const bp = s: 300 m: 500 l: 800 // this will build min-width, max-width queriesconst mqWidth = // this will build min-height, max-height queriesconst mqHeight =
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: 1700const 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.
const CompStyled = styleddiv` // min-width(768px) `
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:
const bp = s: 300 m: 500 l: 800const mq = const mqHeight = const CompStyled = styleddiv` // min-width(500px) // max-width(500px) // between min-width(500px) and max-width(799px) // min-height(500px) // max-height(500px) // between min-height(500px) and max-height(799px) `
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:
const mq = const CompStyled = styleddiv` // min-width(300px) // max-width(603px) // between min-width(23px) and max-width(900px) `
Also, the css
helper is not necessary, so if you want you can use mq
like this:
const mq = const CompStyled = styleddiv` // min-width(300px) // note that 'css' helper is missing`