https://github.com/tanem/media-query-facade

:mask: A nicer JavaScript media query API.
https://github.com/tanem/media-query-facade

Last synced: 8 days 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 (about 10 years ago)
• Default Branch: master
• Last Pushed: 2019-05-30T19:40:07.000Z (over 5 years ago)
• Last Synced: 2024-10-28T08:14:56.845Z (16 days ago)
• Language: JavaScript
• Homepage:
• Size: 40 KB
• Stars: 12
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# media-query-facade

[![build status](https://img.shields.io/travis/tanem/media-query-facade/master.svg?style=flat-square)](https://travis-ci.org/tanem/media-query-facade)

[![coverage status](https://img.shields.io/coveralls/tanem/media-query-facade.svg?style=flat-square)](https://coveralls.io/r/tanem/media-query-facade)

[![npm version](https://img.shields.io/npm/v/media-query-facade.svg?style=flat-square)](https://www.npmjs.com/package/media-query-facade)

[![npm downloads](https://img.shields.io/npm/dm/media-query-facade.svg?style=flat-square)](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