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

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