@react-hookz/web/esm/useMediaQuery/useMediaQuery.js

React hooks done right, for browser and SSR.

import { useEffect } from 'react';
import { useSafeState } from '..';
var queriesMap = new Map();
var querySubscribe = function (query, setState) {
    var entry = queriesMap.get(query);
    if (!entry) {
        var mql_1 = matchMedia(query);
        var dispatchers_1 = new Set();
        var listener = function () {
            dispatchers_1.forEach(function (d) { return d(mql_1.matches); });
        };
        if (mql_1.addEventListener)
            mql_1.addEventListener('change', listener, { passive: true });
        else
            mql_1.addListener(listener);
        entry = {
            mql: mql_1,
            dispatchers: dispatchers_1,
            listener: listener,
        };
        queriesMap.set(query, entry);
    }
    entry.dispatchers.add(setState);
    setState(entry.mql.matches);
};
var queryUnsubscribe = function (query, setState) {
    var entry = queriesMap.get(query);
    // else path is impossible to test in normal situation
    /* istanbul ignore else */
    if (entry) {
        var mql = entry.mql, dispatchers = entry.dispatchers, listener = entry.listener;
        dispatchers.delete(setState);
        if (!dispatchers.size) {
            queriesMap.delete(query);
            if (mql.removeEventListener)
                mql.removeEventListener('change', listener);
            else
                mql.removeListener(listener);
        }
    }
};
/**
 * Tracks the state of CSS media query.
 *
 * Return undefined initially and later receives correct value.
 *
 * @param query CSS media query to track.
 */
export function useMediaQuery(query) {
    var _a = useSafeState(), state = _a[0], setState = _a[1];
    useEffect(function () {
        querySubscribe(query, setState);
        return function () { return queryUnsubscribe(query, setState); };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [query]);
    return state;
}