mqr

Functional matchMedia wrapper for media query handling.

Small functional wrapper for matchMedia to work with media queries in JavaScript. Weighs only 359b, has no dependencies and supports IE10+. To support legacy browsers a polyfill is required.

Table of contents

• Install
• Usage
• API
• License

Install

This module is available on npm.

$ npm install mqr

If you are using some kind of bundler (webpack, rollup...) you can import it like this:

// ES6
import mqr from 'mqr';
 
// CommonJS
var mqr = require('mqr');

The UMD build is also available on unpkg:

<script src="https://unpkg.com/mqr/dist/mqr.js"></script>

Usage

import mqr from 'mqr';
 
const query = mqr();
 
// listen to viewport changes
query.listen('(min-width: 768px)', matches => {
  console.log(matches); // boolean
});
 
// listen + remove handler
function handler() {}
query.listen('(min-width: 768px)', handler);
query.remove('(min-width: 768px)', handler);
 
// simple media query check
const matches = query.matches('(min-width: 992px)');
console.log(matches); // boolean

API

mqr()

Initializes mqr, returns instance with methods.

const query = mqr();

mqr.listen(query, handler[, execute])

Register a handler for a given media query. Handler will be executed once every time the breakpoint is reached. If execute is true (default) the handler will also be called when it's registered.

query.listen('(min-width: 768px)', matches => {
  console.log(matches); // boolean
}, false);

mqr.remove(query, handler)

Removes a previously registered media query handler.

function handler() {}
query.listen('(min-width: 768px)', handler);
query.remove('(min-width: 768px)', handler);

mqr.matches(query)

Checks if given media query is matching.

const matches = query.matches('(min-width: 992px)');
console.log(matches); // boolean

License

MIT © Lars Graubner