match-media-screen

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,
                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)
    }
});

Deployment

Dev server

Run dev server

npm run dev

Generate production files

Generate UMD and module version

npm run prod

Build sites

Build production site

npm run build

License

MIT License

Copyright (c) 2022 Phuc Bui