https://github.com/lgraubner/mqr
Functional matchMedia wrapper for media query handling.
https://github.com/lgraubner/mqr
breakpoint functional matchmedia mediaqueries mediaquery responsive state
Last synced: about 1 year ago
JSON representation
Functional matchMedia wrapper for media query handling.
- Host: GitHub
- URL: https://github.com/lgraubner/mqr
- Owner: lgraubner
- License: mit
- Created: 2017-05-05T12:20:54.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-28T12:27:35.000Z (almost 9 years ago)
- Last Synced: 2025-03-27T16:53:20.038Z (about 1 year ago)
- Topics: breakpoint, functional, matchmedia, mediaqueries, mediaquery, responsive, state
- Language: JavaScript
- Size: 74.2 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mqr
[](https://www.npmjs.com/package/mqr) [](https://travis-ci.org/lgraubner/mqr) [](https://david-dm.org/lgraubner/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](https://github.com/paulirish/matchMedia.js) is required.
## Table of contents
- [Install](#install)
- [Usage](#usage)
- [API](#api)
- [License](#license)
## Install
This module is available on [npm](https://www.npmjs.com/).
```
$ npm install mqr
```
If you are using some kind of bundler ([webpack](https://webpack.js.org), [rollup](https://rollupjs.org)...) you can import it like this:
```JavaScript
// ES6
import mqr from 'mqr';
// CommonJS
var mqr = require('mqr');
```
The [UMD](https://github.com/umdjs/umd) build is also available on [unpkg](https://unpkg.com/#/):
```HTML
```
## Usage
```JavaScript
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.
```JavaScript
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.
```JavaScript
query.listen('(min-width: 768px)', matches => {
console.log(matches); // boolean
}, false);
```
### mqr.remove(query, handler)
Removes a previously registered media query handler.
```JavaScript
function handler() {}
query.listen('(min-width: 768px)', handler);
query.remove('(min-width: 768px)', handler);
```
### mqr.matches(query)
Checks if given media query is matching.
```JavaScript
const matches = query.matches('(min-width: 992px)');
console.log(matches); // boolean
```
## License
[MIT](https://github.com/lgraubner/mqr/blob/master/LICENSE) © [Lars Graubner](https://larsgraubner.com)