media-query-facade

media-query-facade

Do stuff via JavaScript when the media queries on a document change. For efficiency it uses window.matchMedia under the hood.

Usage

import MQFacade from 'media-query-facade'

const mq = new MQFacade({
  small: 'only screen and (max-width: 480px)',
  medium: 'only screen and (min-width: 480px) and (max-width: 720px)'
})

const changeColour = colour => () => {
  document.body.style.backgroundColor = colour
}

mq.on('small', changeColour('blue'))
mq.on('medium', changeColour('green'))
mq.on('only screen and (min-width: 720px)', changeColour('red'))

There is a working version of the above in the example dir. First run npm start, then point a browser at localhost:8080.

API

const mq = new MQFacade(aliases)

Initialise a new MQFacade. Media query aliases may also be provided up front.

mq.registerAlias(alias, query)

Register an alias for a query, or register a number of aliases at once via an object.

mq.registerAlias('small', '(max-width: 100px)')
mq.registerAlias({
  small: '(max-width: 100px)',
  medium: '(max-width: 200px)'
})

mq.on(query, callback, context)

Register a callback which will be executed with the given context on entry of the given query or alias. If context is not specified, it will default to the mq instance.

mq.on('(max-width: 400px)', () => {})
mq.on('smartphones', () => {}, {})

mq.off(query, callback, context)

Remove all callbacks for all queries:

mq.off()

Remove all callbacks for a query or alias:

mq.off('(max-width: 400px)')

Remove a callback for a query or alias:

mq.off('(max-width: 400px)', () => {})

Remove a callback with a context for a query or alias:

mq.off('(max-width: 400px)', () => {}, {})

Install

$ npm install media-query-facade --save

There are also UMD builds available via unpkg:

• https://unpkg.com/media-query-facade/dist/media-query-facade.js
• https://unpkg.com/media-query-facade/dist/media-query-facade.min.js

License

MIT