Mediaq – Listen to media queries updates in TypeScript
mediaq
2.0.0 • Public • Published 4 years ago ReadmeCode Beta0 Dependencies0 Dependents10 Versions
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 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.

License
MIT
Copyright (c) Maroun Baydoun.
