@scaleway/use-media/dist/useMedia.js

A small hook to track CSS media query state

import { useEffect, useLayoutEffect, useState } from "react";
//#region src/useMedia.ts
function noop() {}
var mockMediaQueryList = {
	addEventListener: noop,
	addListener: noop,
	dispatchEvent: () => true,
	matches: false,
	media: "",
	onchange: noop,
	removeEventListener: noop,
	removeListener: noop
};
var createUseMedia = (effect) => (query, defaultState = false) => {
	const [state, setState] = useState(defaultState);
	effect(() => {
		let mounted = true;
		const mediaQueryList = typeof window !== "undefined" && typeof window.matchMedia === "undefined" ? mockMediaQueryList : window.matchMedia(query);
		const onChange = () => {
			if (!mounted) return;
			setState(mediaQueryList.matches);
		};
		mediaQueryList.addEventListener("change", onChange);
		setState(mediaQueryList.matches);
		return () => {
			mounted = false;
			mediaQueryList.removeEventListener("change", onChange);
		};
	}, [query]);
	return state;
};
var useMedia = createUseMedia(useEffect);
var useMediaLayout = createUseMedia(useLayoutEffect);
//#endregion
export { useMedia, useMediaLayout };