@dnb/eufemia/cjs/shared/useMediaQuery.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = useMediaQuery;
var _react = require("react");
var _Context = _interopRequireDefault(require("./Context.js"));
var _MediaQueryUtils = require("./MediaQueryUtils.js");
var _useIsomorphicLayoutEffect = require("./helpers/useIsomorphicLayoutEffect.js");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function useMediaQuery(props) {
  const context = (0, _react.useContext)(_Context.default);
  const {
    query,
    when,
    not,
    matchOnSSR,
    disabled,
    correctRange = true,
    log
  } = props;
  const matches = (0, _react.useMemo)(() => {
    if (disabled) {
      return false;
    }
    return matchOnSSR && !(0, _MediaQueryUtils.isMatchMediaSupported)();
  }, [disabled, matchOnSSR]);
  const mediaQueryList = (0, _react.useRef)((0, _MediaQueryUtils.makeMediaQueryList)({
    query,
    when,
    not
  }, context.breakpoints, {
    disabled,
    correctRange,
    log
  }));
  const [match, matchUpdate] = (0, _react.useState)(matches);
  const listenerRef = (0, _react.useRef)(undefined);
  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
    if (disabled) {
      return undefined;
    }
    if (typeof listenerRef.current === 'function') {
      listenerRef.current();
    }
    mediaQueryList.current = (0, _MediaQueryUtils.makeMediaQueryList)({
      query,
      when,
      not
    }, context.breakpoints, {
      disabled,
      correctRange,
      log
    });
    if (mediaQueryList.current) {
      matchUpdate(mediaQueryList.current.matches);
    }
    listenerRef.current = (0, _MediaQueryUtils.createMediaQueryListener)(mediaQueryList.current, match => matchUpdate(match));
    return listenerRef.current;
  }, [query, when, not, disabled]);
  return Boolean(match);
}
//# sourceMappingURL=useMediaQuery.js.map