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