@amaui/ui-react/esm/useMediaQuery/useMediaQuery.js

UI for React

import React from 'react';
import { isEnvironment } from '@amaui/utils';
const useMediaQuery = (props, options) => {
  const element = options?.element;
  const [root, setRoot] = React.useState();
  const [matches, setMatches] = React.useState(options?.initial !== undefined ? options.initial : isEnvironment('browser') && (element?.ownerDocument?.defaultView || window)?.matchMedia(props)?.matches);
  const refs = {
    root: React.useRef(root),
    responsive: React.useRef({}),
    matches: React.useRef(matches)
  };
  refs.matches.current = matches;

  // Root
  React.useEffect(() => {
    const rootNew = element?.ownerDocument?.defaultView || window;
    setRoot(rootNew);
    refs.root.current = rootNew;
  }, [element]);
  const method = React.useCallback(event => {
    if (refs.matches.current !== event.matches) setMatches(event.matches);
  }, []);

  // Watch
  React.useEffect(() => {
    if (!root) return;
    const mediaQuery = root.matchMedia(props);

    // Add new event listener
    mediaQuery.addEventListener('change', method);
    if (refs.matches.current !== mediaQuery?.matches) setMatches(mediaQuery?.matches);
    return () => {
      // Remove event listener
      if (mediaQuery) mediaQuery.removeEventListener('change', method);
    };
  }, [root, props]);
  return matches;
};
useMediaQuery.displayName = 'amaui-UseMediaQuery';
export default useMediaQuery;