1.0.0 • Published 4 years ago
@rm-labo/mq-js v1.0.0
@rm-labo/mq-js
Statements | Branches | Functions | Lines |
---|---|---|---|
Media Queries Helper Functions for javascript.
Scss version of the package with a similar concept is here
Demo
demo page is here
Install
$ npm i -D @rm-labo/mq-js
Import
import Mq from '@rm-labo/mq-js'
Usage
import Mq from '@rm-labo/mq-js'
const mq = new Mq()
// basic usage
mq.up( bpKeyName1, matchHandler [, unmatchHandler ])
mq.down( bpKeyName1, matchHandler [, unmatchHandler ])
mq.between( bpKeyName1, bpKeyName2, matchHandler [, unmatchHandler ])
arguments | type | required |
---|---|---|
bpKeyName1 | string | true |
bpKeyName2 | string | true |
matchHandler | function | true |
unmatchHandler | function | false |
Set the argument to option.breakpoints
property.
Example of a single breakpoint specification.
const mq = new Mq()
// The second and third (optional) arguments can be used to describe the process that occurs when a condition is met or deviated from.
mq.up(
'sm',
() => { /* Fires in 600px and up */ },
() => { /* Fires in 599px and down */ }
)
// You can also use method chains to write explicitly
mq
.down('md', () => { /* Fires in 899px and down */ })
.up('md', () => { /* Fires in 900px and up */ })
// You can also specify a specific range.
mq
.between(
'md',
'lg',
() => { /* Fires in 900 ~ 1199px */ },
() => { /* Fires in ~ 899px and 1200px ~ */ })
// Example with all ranges
mq
.down('sm', () => { /* Fires in 599px and down */ })
.between('sm', 'md', () => { /* Fires in 600 ~ 899px */ })
.between('md', 'lg', () => { /* Fires in 900 ~ 1199px */ })
.between('lg', 'xl', () => { /* Fires in 1200 ~ 1799px */ })
.up('xl', () => { /* Fires in 1800px ~ */ })
For the height
const mq = new Mq()
// The second and third (optional) arguments can be used to describe the process that occurs when a condition is met or deviated from.
mq.heightUp(
'sm',
() => { /* Fires in 600px and up */ },
() => { /* Fires in 599px and down */ }
)
// You can also use method chains to write explicitly
mq
.heightDown('md', () => { /* Fires in 899px and down */ })
.heightUp('md', () => { /* Fires in 900px and up */ })
// You can also specify a specific range.
mq
.heightBetween(
'md',
'lg',
() => { /* Fires in 900 ~ 1199px */ },
() => { /* Fires in ~ 899px and 1200px ~ */ })
// Example with all ranges
mq
.heightDown('sm', () => { /* Fires in 599px and down */ })
.heightBetween('sm', 'md', () => { /* Fires in 600 ~ 899px */ })
.heightBetween('md', 'lg', () => { /* Fires in 900 ~ 1199px */ })
.heightBetween('lg', 'xl', () => { /* Fires in 1200 ~ 1799px */ })
.heightUp('xl', () => { /* Fires in 1800px ~ */ })
It is also possible to specify the width
if you want to use it together with the height
.
const mq = new Mq()
mq.widthUp() // = mq.up()
mq.widthDown() // = mq.down()
mq.widthBetween() // = mq.between()
// Example of a single breakpoint
ma
.widthUp('md', () => {}, () => {})
.heightUp('md', () => {}, () => {})
// Example with all ranges
mq
.widthDown('sm', () => { /* Fires in w = 599px and down */ })
.widthBetween('sm', 'md', () => { /* Fires in w = 600 ~ 899px */ })
.widthBetween('md', 'lg', () => { /* Fires in w = 900 ~ 1199px */ })
.widthBetween('lg', 'xl', () => { /* Fires in w = 1200 ~ 1799px */ })
.widthUp('xl', () => { /* Fires in w = 1800px ~ */ })
.heightDown('sm', () => { /* Fires in h = 599px and down */ })
.heightBetween('sm', 'md', () => { /* Fires in h = 600 ~ 899px */ })
.heightBetween('md', 'lg', () => { /* Fires in h = 900 ~ 1199px */ })
.heightBetween('lg', 'xl', () => { /* Fires in h = 1200 ~ 1799px */ })
.heightUp('xl', () => { /* Fires in h = 1800px ~ */ })
Default setting values
{
breakpoints: {
sm: 600,
md: 900,
lg: 1200,
xl: 1800,
}
}
Override default setting values
You can overwrite option. Define all of the breakpoints and name combinations you want to use in your project.
const option = {
breakpoints: {
'micro' : 320,
'small' : 620,
'medium' : 840,
'large' : 1280,
'extra' : 1900,
// .. Add as many as you like ..
}
}
const mq = new Mq(option)
// usage example
mq
.down('micro', () => { /* Fires in 319px and down */ },)
.between('micro', 'small', () => { /* Fires in 320 ~ 619px */ },)
.between('small', 'medium', () => { /* Fires in 620 ~ 839px */ },)
.between('medium', 'large', () => { /* Fires in 840 ~ 1279px */ },)
.between('large', 'extra', () => { /* Fires in 1280 ~ 1899px */ },)
.up('extra', () => { /* Fires in 1900px and up */ },)
Licence
Licensed under MIT license. You are free to use for your personal or commercial projects.
Release notes
Version | Description |
---|---|
1.0.0 | Launch |
1.0.0
4 years ago