Skip to content

Latest commit

 

History

History
62 lines (40 loc) · 1.3 KB

README.md

File metadata and controls

62 lines (40 loc) · 1.3 KB
Raw

Mediaq

Listen to media query updates in JavaScript

npm version

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 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.

License

MIT Copyright (c) Maroun Baydoun.