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

An implementation of GitHub's Primer Design System using React

import { canUseDOM } from "../utils/environment.js";
import { warning } from "../utils/warning.js";
import { MatchMediaContext } from "./MatchMediaContext.js";
import { c } from "react-compiler-runtime";
import React, { useContext, useEffect } from "react";
//#region src/hooks/useMedia.ts
/**
* `useMedia` will use the given `mediaQueryString` with `matchMedia` to
* determine if the document matches the media query string.
*
* If `MatchMedia` is used as an ancestor, `useMedia` will instead use the
* value of the media query string, if available
*
* @example
* function Example() {
*   const coarsePointer = useMedia('(pointer: coarse)');
*   // ...
* }
*/
function useMedia(mediaQueryString, defaultState) {
	const $ = c(8);
	const features = useContext(MatchMediaContext);
	let t0;
	if ($[0] !== defaultState || $[1] !== features || $[2] !== mediaQueryString) {
		t0 = () => {
			if (features[mediaQueryString] !== void 0) return features[mediaQueryString];
			if (defaultState !== void 0) return defaultState;
			if (canUseDOM) return window.matchMedia(mediaQueryString).matches;
			warning(true, "`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.");
			return false;
		};
		$[0] = defaultState;
		$[1] = features;
		$[2] = mediaQueryString;
		$[3] = t0;
	} else t0 = $[3];
	const [matches, setMatches] = React.useState(t0);
	if (features[mediaQueryString] !== void 0 && matches !== features[mediaQueryString]) setMatches(features[mediaQueryString]);
	let t1;
	let t2;
	if ($[4] !== features || $[5] !== mediaQueryString) {
		t1 = () => {
			if (features[mediaQueryString] !== void 0) 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;
}
//#endregion
export { useMedia };