match-media-screen's Introduction

Match Media Screen

Observe window.resize and fire corresponding events with given object data.

Installation

NPM Package

Install NPM package

npm i match-media-screen

Import

import {MatchMediaScreen} from "match-media-screen";

Download

👉 Self hosted - Download the latest release

<script src="./match-media-screen.min.js"></script>

👉 CDN Hosted - jsDelivr

<script src="https://cdn.jsdelivr.net/gh/phucbm/match-media-screen/dist/match-media-screen.min.js"></script>

Usage

Demo: https://match-media-screen.netlify.app

new MatchMediaScreen({
    object: {
        value: 'desktop',
        responsive: [
            {
                breakpoint: 1024, // same as `@media only screen and (max-width:1024px)`
                settings: {
                    value: 'tablet',
                }
            },
            {
                breakpoint: 480,
                settings: {
                    value: 'mobile',
                }
            }
        ],
    },
    debounce: 100, // [ms] debounce time on resize event
    // fire everytime a matched breakpoint is found
    onMatched: data => {
        console.table(data)
        document.querySelector('[data-code]').innerHTML = JSON.stringify(data);
    },
    // fire on every resize event with debouce time of 100ms
    onUpdate: data => {
        console.log(data)
    }
});