mediaq
v2.0.0
Published
Listen to media query updates in JavaScript
Downloads
15
Maintainers
Readme
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.