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

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

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_environment_provider = require('../../core/system/environment-provider.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(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 } = require_environment_provider.useEnvironment();
	const subscribe = (0, react.useCallback)((onStoreChange) => {
		const mql = getWindow()?.matchMedia(query);
		mql?.addEventListener("change", onStoreChange);
		return () => {
			mql?.removeEventListener("change", onStoreChange);
		};
	}, [getWindow, query]);
	const getSnapshot = (0, react.useCallback)(() => {
		return getWindow()?.matchMedia(query).matches ?? fallback;
	}, [
		getWindow,
		query,
		fallback
	]);
	return (0, react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
};

//#endregion
exports.useMediaQuery = useMediaQuery;
//# sourceMappingURL=index.cjs.map