rm-labo/mq-js

Media Queries Helper Functions for javascript.

@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