Mediaq
Listen to media query updates in JavaScript
Install
npm i mediaq
Or
yarn add mediaq
Use
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
functions expects a single object argument with onUpdate
and mediaQueries
keys.
-
onUpdate
takes one argument having themedia
,name
andmatches
properties. -
mediaQueries
is an array of objects having thename
andmedia
keys.
It returns an object having the start
and stop
methods.
-
start
callsonUpdate
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.
License
MIT Copyright (c) Maroun Baydoun.