@wordpress/compose
Version:
WordPress higher-order components (HOCs).
52 lines (51 loc) • 1.32 kB
JavaScript
// packages/compose/src/hooks/use-media-query/index.js
import { useMemo, useSyncExternalStore } from "@wordpress/element";
var matchMediaCache = /* @__PURE__ */ new Map();
function getMediaQueryList(query) {
if (!query) {
return null;
}
let match = matchMediaCache.get(query);
if (match) {
return match;
}
if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
match = window.matchMedia(query);
matchMediaCache.set(query, match);
return match;
}
return null;
}
function useMediaQuery(query) {
const source = useMemo(() => {
const mediaQueryList = getMediaQueryList(query);
return {
/** @type {(onStoreChange: () => void) => () => void} */
subscribe(onStoreChange) {
if (!mediaQueryList) {
return () => {
};
}
mediaQueryList.addEventListener?.("change", onStoreChange);
return () => {
mediaQueryList.removeEventListener?.(
"change",
onStoreChange
);
};
},
getValue() {
return mediaQueryList?.matches ?? false;
}
};
}, [query]);
return useSyncExternalStore(
source.subscribe,
source.getValue,
() => false
);
}
export {
useMediaQuery as default
};
//# sourceMappingURL=index.js.map