mqr v1.0.1

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