@bianic-ui/media-query/dist/cjs/use-media-query.js

A React hook for changing properties or visibility of a component based on css media query

"use strict";

exports.__esModule = true;
exports.useMediaQuery = useMediaQuery;

var React = _interopRequireWildcard(require("react"));

var _utils = require("@bianic-ui/utils");

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var isSupported = function isSupported(api) {
  return _utils.isBrowser && api in window;
};

var useSafeLayoutEffect = _utils.isBrowser ? React.useLayoutEffect : React.useEffect;
/**
 * React hook that tracks state of a CSS media query
 *
 * @param query the media query to match
 */

function useMediaQuery(query) {
  var _React$useState = React.useState(function () {
    if (!isSupported("matchMedia")) return false;
    return !!window.matchMedia(query).matches;
  }),
      matches = _React$useState[0],
      setMatches = _React$useState[1];

  useSafeLayoutEffect(function () {
    if (!isSupported("matchMedia")) return;
    var mediaQueryList = window.matchMedia(query);

    var listener = function listener() {
      return setMatches(!!mediaQueryList.matches);
    };

    mediaQueryList.addListener(listener);
    listener();
    return function () {
      mediaQueryList.removeListener(listener);
    };
  }, [query]);
  return [matches, setMatches];
}
//# sourceMappingURL=use-media-query.js.map