backbone.mq

backbone.mq

Backbone plugin to detect and listen to media queries.

Usage

Setup

Create a new MQ object to get started.

import MQ from 'backbone.mq'

const mq = new MQ()

Then add your media queries you would like to use.

mq.add('desktop', 'only screen and (min-width:60em)')

Or add multiple media queries.

mq.add({
	'desktop': 'screen and (min-width:60em)',
	'mobile': 'handheld or screen and (max-width:59.99em)'
})

Or add your media queries when you initialize your MQ object.

const mq = new MQ({
	'desktop': 'screen and (min-width:60em)',
	'mobile': 'handheld or screen and (max-width:59.99em)'
})

You can also remove media queries.

mq.remove('mobile')

Detection

At any point you can see if your media query matches.

const isDesktop = mq.matches('desktop') // -> boolean

if (isDesktop) {
	// Do some desktopy things
}

Alternatively this works too.

mq.matches('desktop', function() {
	// Also do some desktopy things
})

Events

You can also listen for when a media query becomes matched or unmatched. The MQ object extends Backbone.Events, so enjoy making the most of it.

Events which are namespaced by :match or :unmatch are only triggered if the media query is matched or unmatched respectively.

mq.on('desktop', function (media) {
	if (media.matches) {
		// Do some desktopy things
	} else {
		// Or not
	}
})

mq.once('mobile:match', function() {
	// I'm on a phone!
})

backboneThing.listenTo(mq, 'desktop:unmatch', function() {
	// Wait, we're not on a desktop any more? How did that happen?
})

mq.off('desktop')

Chainable

Most methods on MQ are chainable.

mq
.add({
	'desktop': 'screen and (min-width:60em)',
	'mobile': 'handheld or screen and (max-width:59.99em)'
})
.matches('desktop', function() { /* ... */ })
.once('mobile', function() { /* ... */ })
.remove('desktop')

Except mq.matches() with a single parameter, which returns a boolean :wink:

Fallback

When matchMedia or media queries isn't supported, MQ will fall back to a single media query. By default the first added media query will be used, but you're welcome to override it:

mq.fallback = 'mobile'; // Mobile first yo!

Compatibility

Backbone.MQ requires matchMedia to work properly, so you might need a polyfill for older browsers.

License

MIT - see license