@wordpress/compose
Version:
WordPress higher-order components (HOCs).
61 lines (60 loc) • 1.63 kB
JavaScript
// packages/compose/src/hooks/use-media-query/index.ts
import { useSyncExternalStore } from "@wordpress/element";
var perWindowCache = /* @__PURE__ */ new WeakMap();
var EMPTY_SUBSCRIBER = {
subscribe: () => () => {
},
getValue: () => false
};
function getMQLSubscriber(view, query) {
if (!view || !query || typeof view.matchMedia !== "function") {
return EMPTY_SUBSCRIBER;
}
let queryCache = perWindowCache.get(view);
if (!queryCache) {
queryCache = /* @__PURE__ */ new Map();
perWindowCache.set(view, queryCache);
}
const cached = queryCache.get(query);
if (cached) {
return cached;
}
const mediaQueryList = view.matchMedia(query);
const listeners = /* @__PURE__ */ new Set();
const notify = () => {
for (const listener of listeners) {
listener();
}
};
const subscriber = {
subscribe(onStoreChange) {
if (listeners.size === 0) {
mediaQueryList.addEventListener?.("change", notify);
}
listeners.add(onStoreChange);
return () => {
listeners.delete(onStoreChange);
if (listeners.size === 0) {
mediaQueryList.removeEventListener?.("change", notify);
}
};
},
getValue() {
return mediaQueryList.matches;
}
};
queryCache.set(query, subscriber);
return subscriber;
}
function useMediaQuery(query, view = typeof window !== "undefined" ? window : void 0) {
const source = getMQLSubscriber(view, query);
return useSyncExternalStore(
source.subscribe,
source.getValue,
() => false
);
}
export {
useMediaQuery as default
};
//# sourceMappingURL=index.mjs.map