@modern-kit/react/dist/hooks/useMediaQuery/index.mjs

modern-kit/react

import { isClient } from '@modern-kit/utils';
import { useEventListener } from '../useEventListener/index.mjs';
import { useState, useCallback } from 'react';
import '../usePreservedCallback/index.mjs';
import '../useIsomorphicLayoutEffect/index.mjs';

const getMatchMedia = (mediaQueryString, defaultValue) => {
  if (isClient()) {
    return window.matchMedia(mediaQueryString).matches;
  }
  return defaultValue ?? false;
};
function useMediaQuery(mediaQueryString, defaultValue) {
  const [isMatch, setIsMatch] = useState(
    getMatchMedia(mediaQueryString, defaultValue)
  );
  const handleChange = useCallback(
    (e) => setIsMatch(e.matches),
    []
  );
  useEventListener(
    typeof window !== "undefined" ? window.matchMedia(mediaQueryString) : null,
    "change",
    handleChange
  );
  return isMatch;
}

export { useMediaQuery };
//# sourceMappingURL=index.mjs.map