mediaq
TypeScript icon, indicating that this package has built-in type declarations

2.0.0 • Public • Published

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

Package Sidebar

Install

npm i mediaq

Weekly Downloads

1

Version

2.0.0

License

MIT

Unpacked Size

5.46 kB

Total Files

5

Last publish

Collaborators

  • maroun-baydoun