@mantine/hooks
Version:
A collection of 50+ hooks for state and UI management
31 lines (30 loc) • 1.1 kB
JavaScript
"use client";
let react = require("react");
//#region packages/@mantine/hooks/src/use-media-query/use-media-query.ts
function getInitialValue(query, initialValue) {
if (typeof initialValue === "boolean") return initialValue;
if (typeof window !== "undefined" && "matchMedia" in window) return window.matchMedia(query).matches;
return false;
}
function useMediaQuery(query, initialValue, { getInitialValueInEffect } = { getInitialValueInEffect: true }) {
const [matches, setMatches] = (0, react.useState)(getInitialValueInEffect ? initialValue : getInitialValue(query));
(0, react.useEffect)(() => {
try {
if ("matchMedia" in window) {
const mediaQuery = window.matchMedia(query);
setMatches(mediaQuery.matches);
const callback = (event) => setMatches(event.matches);
mediaQuery.addEventListener("change", callback);
return () => {
mediaQuery.removeEventListener("change", callback);
};
}
} catch (e) {
return;
}
}, [query]);
return matches || false;
}
//#endregion
exports.useMediaQuery = useMediaQuery;
//# sourceMappingURL=use-media-query.cjs.map