@mskcc/carbon-react/es/internal/useMatchMedia.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

import { useState, useEffect } from 'react';
import { canUseDOM } from './environment.js';

function useMatchMedia(mediaQueryString) {
  const [matches, setMatches] = useState(() => {
    if (canUseDOM) {
      const mediaQueryList = window.matchMedia(mediaQueryString);
      return mediaQueryList.matches;
    }
    return false;
  });
  useEffect(() => {
    function listener(event) {
      setMatches(event.matches);
    }
    const mediaQueryList = window.matchMedia(mediaQueryString);
    // Support fallback to `addListener` for broader browser support
    if (mediaQueryList.addEventListener) {
      mediaQueryList.addEventListener('change', listener);
    } else {
      mediaQueryList.addListener(listener);
    }

    // Make sure the media query list is in sync with the matches state
    setMatches(mediaQueryList.matches);
    return () => {
      if (mediaQueryList.addEventListener) {
        mediaQueryList.removeEventListener('change', listener);
      } else {
        mediaQueryList.removeListener(listener);
      }
    };
  }, [mediaQueryString]);
  return matches;
}

export { useMatchMedia };