mg-js/cjs/components/MediaQuery.js

A set of useful functions, components and hooks.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = require("react");
var MediaQuery = function (_a) {
    var minWidth = _a.minWidth, maxWidth = _a.maxWidth, children = _a.children;
    var _b = (0, react_1.useState)(false), isMatch = _b[0], setIsMatch = _b[1];
    (0, react_1.useEffect)(function () {
        var mediaQuery = "";
        if (minWidth && maxWidth) {
            mediaQuery = "(min-width: ".concat(minWidth, "px) and (max-width: ").concat(maxWidth, "px)");
        }
        else if (minWidth) {
            mediaQuery = "(min-width: ".concat(minWidth, "px)");
        }
        else if (maxWidth) {
            mediaQuery = "(max-width: ".concat(maxWidth, "px)");
        }
        var media = window.matchMedia(mediaQuery);
        setIsMatch(media.matches);
        media.addEventListener("change", function (_a) {
            var matches = _a.matches;
            setIsMatch(matches);
        });
    }, []);
    if (isMatch)
        return children;
};
exports.default = MediaQuery;