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

DNB Eufemia Design System UI Library

"use client";

import { useContext, useMemo, useRef, useState } from 'react';
import { isTrue } from "./component-helper.js";
import Context from "./Context.js";
import { makeMediaQueryList, createMediaQueryListener, isMatchMediaSupported } from "./MediaQueryUtils.js";
import { useIsomorphicLayoutEffect as useLayoutEffect } from "./helpers/useIsomorphicLayoutEffect.js";
export default function useMediaQuery(props) {
  const context = useContext(Context);
  const {
    query,
    when,
    not,
    matchOnSSR,
    disabled,
    correctRange = true,
    log
  } = props;
  let matches = useMemo(() => {
    if (disabled) {
      return false;
    }
    return isTrue(matchOnSSR) && !isMatchMediaSupported();
  }, [disabled, matchOnSSR]);
  const mediaQueryList = useRef(makeMediaQueryList({
    query,
    when,
    not
  }, context.breakpoints, {
    disabled,
    correctRange,
    log
  }));
  if (mediaQueryList.current?.matches) {
    matches = true;
  }
  const [match, matchUpdate] = useState(matches);
  const listenerRef = useRef();
  useLayoutEffect(() => {
    if (disabled) {
      return;
    }
    if (typeof listenerRef.current === 'function') {
      listenerRef.current();
      mediaQueryList.current = makeMediaQueryList({
        query,
        when,
        not
      }, context.breakpoints, {
        disabled,
        correctRange,
        log
      });
      matchUpdate(mediaQueryList.current?.matches);
    }
    listenerRef.current = createMediaQueryListener(mediaQueryList.current, match => matchUpdate(match));
    return listenerRef.current;
  }, [query, when, not, disabled]);
  return Boolean(match);
}
//# sourceMappingURL=useMediaQuery.js.map