mq-js

Scss version of the package with a similar concept is here

Install

$ npm i -D @rm-labo/mq-js

Usage

basic usage

import Mq from '@rm-labo/mq-js'

const mq = new Mq()

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.

// override example
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 */ },)

Examples

#box-mq-up

#box-mq-down

const mq = new Mq()

function boxStyle(target: HTMLDivElement, color: string) {
  return () => target.style.backgroundColor = color
}

// The second and third (optional) arguments 
// can be used to describe the process that occurs 
// when a condition is met or deviated from.
const boxMqUp = document.getElementById('box-mq-up')
mq.up(
  'sm', 
  boxStyle(boxMqUp, 'red'),
  boxStyle(boxMqUp, 'blue')
)

// You can also use method chains to write explicitly
const boxMqDown = document.getElementById('box-mq-down')
mq
  .down('md', boxStyle(boxMqDown, 'red'))
  .up('md', boxStyle(boxMqDown, 'blue'))

#box-mq-between

#box-mq-all-range

const mq = new Mq()

// You can also specify a specific range.
const boxMqBetween = document.getElementById('box-mq-between')
mq
  .between(
      'md', 
      'lg', 
      boxStyle(boxMqBetween, 'red'),
      boxStyle(boxMqBetween, 'blue')
    )

// Example with all ranges
const boxMqAllRange = document.getElementById('box-mq-all-range')
mq
  .widthDown('sm', boxStyle(boxMqAllRange, 'red'))
  .widthBetween('sm', 'md', boxStyle(boxMqAllRange, 'orange'))
  .widthBetween('md', 'lg', boxStyle(boxMqAllRange, 'green'))
  .widthBetween('lg', 'xl', boxStyle(boxMqAllRange, 'blue'))
  .widthUp('xl', boxStyle(boxMqAllRange, 'purple'))

height example

#box-mq-height-up

#box-mq-height-down

const mq = new Mq()

function boxStyle(target: HTMLDivElement, color: string) {
  return () => target.style.backgroundColor = color
}

// The second and third (optional) arguments 
// can be used to describe the process that occurs 
// when a condition is met or deviated from.
const boxMqHeightUp = document.getElementById('box-mq-height-up')
mq.heightUp(
    'sm', 
    boxStyle(boxMqHeightUp, 'red'), 
    boxStyle(boxMqHeightUp, 'blue')
  )

// You can also use method chains to write explicitly
const boxMqHeightDown = document.getElementById('box-mq-height-down')
mq
  .heightDown('md', boxStyle(boxMqHeightDown, 'red'))
  .heightUp('md', boxStyle(boxMqHeightDown, 'blue'))

#box-mq-height-between

#box-mq-height-all-range

const mq = new Mq()

// You can also specify a specific range.
const boxMqHeightBetween = document.getElementById('box-mq-height-between')
mq
  .heightBetween(
      'md', 
      'lg', 
      boxStyle(boxMqHeightBetween, 'red'),
      boxStyle(boxMqHeightBetween, 'blue')
    )

// Example with all ranges
const boxMqHeightAllRange = document.getElementById('box-mq-height-all-range')
mq
  .heightDown('sm', boxStyle(boxMqHeightAllRange, 'red'))
  .heightBetween('sm', 'md', boxStyle(boxMqHeightAllRange, 'orange'))
  .heightBetween('md', 'lg', boxStyle(boxMqHeightAllRange, 'green'))
  .heightBetween('lg', 'xl', boxStyle(boxMqHeightAllRange, 'blue'))
  .heightUp('xl', boxStyle(boxMqHeightAllRange, 'purple'))

Licence

Licensed under MIT license.
You are free to use for your personal or commercial projects.

Release notes

version	Description
ver 1.0.0	launch