import { useEffect, useState } from "react";
export const noMatchMedia = typeof window !== "undefined" && window.matchMedia === undefined;
/**
 * @example useMedia("screen and (min-width: 1024px)")
 * @param media string
 * @param fallback boolean
 * @returns boolean | undefined
 */
export const useMedia = (media, fallback) => {
    const [matches, setMatches] = useState(fallback);
    useEffect(() => {
        if (noMatchMedia) {
            return;
        }
        const mediaQueryList = window.matchMedia(media);
        setMatches(mediaQueryList.matches); // eslint-disable-line react-hooks/set-state-in-effect
        const listener = (evt) => {
            setMatches(evt.matches);
        };
        mediaQueryList.addEventListener("change", listener);
        return () => {
            mediaQueryList.removeEventListener("change", listener);
        };
    }, [media]);
    return matches;
};
//# sourceMappingURL=useMedia.js.map