https://github.com/tanem/media-query-facade
:mask: A nicer JavaScript media query API.
https://github.com/tanem/media-query-facade
Last synced: 3 months ago
JSON representation
:mask: A nicer JavaScript media query API.
- Host: GitHub
- URL: https://github.com/tanem/media-query-facade
- Owner: tanem
- License: mit
- Created: 2014-09-13T09:15:58.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2019-05-30T19:40:07.000Z (about 6 years ago)
- Last Synced: 2025-03-27T13:38:34.358Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 40 KB
- Stars: 12
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# media-query-facade
[](https://travis-ci.org/tanem/media-query-facade)
[](https://coveralls.io/r/tanem/media-query-facade)
[](https://www.npmjs.com/package/media-query-facade)
[](https://www.npmjs.com/package/media-query-facade)
> Do stuff via JavaScript when the media queries on a document change. For efficiency it uses [window.matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia) under the hood.
## Usage
```js
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.
```js
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.
```js
mq.on('(max-width: 400px)', () => {})
mq.on('smartphones', () => {}, {})
```
### mq.off(query, callback, context)
Remove all callbacks for all queries:
```js
mq.off()
```
Remove all callbacks for a `query` or alias:
```js
mq.off('(max-width: 400px)')
```
Remove a `callback` for a `query` or alias:
```js
mq.off('(max-width: 400px)', () => {})
```
Remove a `callback` with a `context` for a `query` or alias:
```js
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