@raddix/use-media-query/dist/index.mjs

Is a hook that respond to media query changes

// src/index.ts
import { useEffect, useState } from "react";
var useMediaQuery = (query) => {
  const [isMatch, setIsMatch] = useState(false);
  const getQueryValue = (md) => {
    if (typeof md === "string")
      return md;
    return `(min-width: ${md}px)`;
  };
  useEffect(() => {
    const newQuery = getQueryValue(query);
    const mql = window.matchMedia(newQuery);
    setIsMatch(mql.matches);
    const handleChange = (e) => setIsMatch(e.matches);
    mql.addEventListener("change", handleChange);
    return () => mql.removeEventListener("change", handleChange);
  }, [query]);
  return isMatch;
};
export {
  useMediaQuery
};