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

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var environment = require('./environment.js');

function useMatchMedia(mediaQueryString) {
  const [matches, setMatches] = React.useState(() => {
    if (environment.canUseDOM) {
      const mediaQueryList = window.matchMedia(mediaQueryString);
      return mediaQueryList.matches;
    }
    return false;
  });
  React.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;
}

exports.useMatchMedia = useMatchMedia;