https://github.com/maroun-baydoun/mediaq
Listen to media query updates in JavaScript
https://github.com/maroun-baydoun/mediaq
css javascript media-queries responsive typescript
Last synced: about 2 months ago
JSON representation
Listen to media query updates in JavaScript
- Host: GitHub
- URL: https://github.com/maroun-baydoun/mediaq
- Owner: maroun-baydoun
- License: mit
- Created: 2015-05-11T06:33:41.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T03:55:51.000Z (over 2 years ago)
- Last Synced: 2024-08-09T14:34:50.046Z (9 months ago)
- Topics: css, javascript, media-queries, responsive, typescript
- Language: TypeScript
- Homepage: https://dev.maroun-baydoun.com/mediaq/
- Size: 1.73 MB
- Stars: 10
- Watchers: 3
- Forks: 2
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Mediaq
Listen to media query updates in JavaScript
[](https://badge.fury.io/js/mediaq)
#### Install
```
npm i mediaq
```
Or
```
yarn add mediaq
```
#### Use
```js
import { Mediaq } from "mediaq";
const mediaq = Mediaq({
onUpdate: (e) => console.log(e.name, e.media, e.matches),
mediaQueries: [{
name: "mobile",
media: "only screen and (max-width: 600px)"
}, {
name: "desktop",
media: "only screen and (min-width: 600px)"
}]
});
mediaq.start();
// When done listening
mediaq.stop();
```
#### API
The `Mediaq` function expects a single object argument with `onUpdate` and `mediaQueries` keys.
* `onUpdate` takes one argument having the `media`, `name` and `matches` properties.
* `mediaQueries` is an array of objects having the `name` and `media` keys.
It returns an object having the `start` and `stop` methods.
* `start` calls `onUpdate` with the current state of mediaquery matches and listens for future updates. Calling this method repeatedly has no effect.
* `stop` ceases listening for mediaquery updates. Calling this method repeatedly has no effect.
#### Demo
See it running in action in this [demo](https://dev.maroun-baydoun.com/mediaq/#demo).
#### License
MIT
Copyright (c) [Maroun Baydoun](https://maroun-baydoun.com/).