# media-query-event

> Detect CSS media query changing event and run the callback function.

Latest version **1.0.5** (published 2016-04-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install media-query-event
pnpm add media-query-event
yarn add media-query-event
bun add media-query-event
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2016-04-26 |
| First published | 2016-04-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | An |
| Maintainers | tz5514 |
| Keywords | media-query, mediaquery, media-query-event, rwd, responsive |

## Links

- npm: https://www.npmjs.com/package/media-query-event
- Repository: https://github.com/tz5514/media-query-event
- Homepage: https://github.com/tz5514/media-query-event#readme
- Issues: https://github.com/tz5514/media-query-event/issues
- npm.io page: https://npm.io/package/media-query-event

## Alternatives

- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads

## Recent versions

- 1.0.5 (latest) — 2016-04-26
- 1.0.4 — 2016-04-26
- 1.0.3 — 2016-04-26
- 1.0.2 — 2016-04-26
- 1.0.1 — 2016-04-26
- 1.0.0 — 2016-04-18

## README

media-query-event
=================
a module that help you detect CSS media query changing event and run the callback function.

## Installation
```
npm install media-query-event --save
```

## Usage
```
var mediaQueryEvent = require('media-query-event');
mediaQueryEvent.bind(range, callback, callbackWhenPageInit);
```
### range
|  | Type | Example Value | Description |
|:------|:------:|:------:|:------|
| single range | string | 'xs', 'sm', 'md', 'lg' | 由其他 range 進入到這個 range 時，觸發 callback function |
| multiple range | array | ['xs', 'sm'] | 由陣列以外的 range 進入到陣列中這些 range 時，觸發 callback function |


### callback


| Type | Description |
|:------:|:------|
| function | A callback function that you want to run when media query is changing. |

### callbackWhenPageInit
| Type | Example Value | Default Value | Description |
|:------:|:------:|:------|:------:|
| boolean  | true, false | false | Run the callback function when the web page initialized.|

## Example
### Single Range
```
mediaQueryEvent.bind('sm', function() {
  alert('sm');
});
```
### Multiple Range
```
mediaQueryEvent.bind(['md', 'lg'], function() {
  alert('desktop');
});
```
### Run callback when the page initialized
```
mediaQueryEvent.bind('sm', function() {
  alert('sm');
}, true);
```

#### About more examples, please see the "demo" directory.

---
_Source: https://npm.io/package/media-query-event · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._