@primer/react/dist/hooks/useMedia.js

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import React, { useContext, createContext, useEffect } from 'react';
import 'react/jsx-runtime';

function useMedia(mediaQueryString, defaultState) {
  const $ = c(8);
  const features = useContext(MatchMediaContext);
  let t0;
  if ($[0] !== defaultState || $[1] !== features || $[2] !== mediaQueryString) {
    t0 = () => {
      if (features[mediaQueryString] !== undefined) {
        return features[mediaQueryString];
      }
      {
        return defaultState;
      }
    };
    $[0] = defaultState;
    $[1] = features;
    $[2] = mediaQueryString;
    $[3] = t0;
  } else {
    t0 = $[3];
  }
  const [matches, setMatches] = React.useState(t0);
  if (features[mediaQueryString] !== undefined && matches !== features[mediaQueryString]) {
    setMatches(features[mediaQueryString]);
  }
  let t1;
  let t2;
  if ($[4] !== features || $[5] !== mediaQueryString) {
    t1 = () => {
      if (features[mediaQueryString] !== undefined) {
        return;
      }
      const listener = function listener(event) {
        setMatches(event.matches);
      };
      const mediaQueryList = window.matchMedia(mediaQueryString);
      if (mediaQueryList.addEventListener) {
        mediaQueryList.addEventListener("change", listener);
      } else {
        mediaQueryList.addListener(listener);
      }
      setMatches(mediaQueryList.matches);
      return () => {
        if (mediaQueryList.addEventListener) {
          mediaQueryList.removeEventListener("change", listener);
        } else {
          mediaQueryList.removeListener(listener);
        }
      };
    };
    t2 = [features, mediaQueryString];
    $[4] = features;
    $[5] = mediaQueryString;
    $[6] = t1;
    $[7] = t2;
  } else {
    t1 = $[6];
    t2 = $[7];
  }
  useEffect(t1, t2);
  return matches;
}
// Used to keep track of overrides to specific media query features, this should
// be used for development and demo purposes to emulate specific features if
// unavailable through devtools
const MatchMediaContext = /*#__PURE__*/createContext({});

export { useMedia };