@yamada-ui/react/dist/esm/hooks/use-media-query/index.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { useEnvironment } from "../../core/system/environment-provider.js";
import { useCallback, useSyncExternalStore } from "react";

//#region src/hooks/use-media-query/index.ts
/**
* `useMediaQuery` is a custom hook that detects whether it matches a media query.
*
* @see https://yamada-ui.com/docs/hooks/use-media-query
*/
const useMediaQuery = (query, fallback = false) => {
	const { getWindow } = useEnvironment();
	const subscribe = useCallback((onStoreChange) => {
		const mql = getWindow()?.matchMedia(query);
		mql?.addEventListener("change", onStoreChange);
		return () => {
			mql?.removeEventListener("change", onStoreChange);
		};
	}, [getWindow, query]);
	const getSnapshot = useCallback(() => {
		return getWindow()?.matchMedia(query).matches ?? fallback;
	}, [
		getWindow,
		query,
		fallback
	]);
	return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
};

//#endregion
export { useMediaQuery };
//# sourceMappingURL=index.js.map