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.

    Install

    npm i mediaq

    DownloadsWeekly Downloads

    1

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    5.46 kB

    Total Files

    5

    Last publish

    Collaborators

    • maroun-baydoun