useMediaQuery Hook React

import { useState, useEffect } from "react";

const useMediaQuery = (query) => {
  const mediaQuery = window.matchMedia(query);
  const [matches, setMatches] = useState(mediaQuery.matches);

  useEffect(() => {
    const handleMediaChange = (event) => {
      setMatches(event.matches);
    };

    mediaQuery.addEventListener("change", handleMediaChange);

    return () => {
      mediaQuery.removeEventListener("change", handleMediaChange);
    };
  }, [mediaQuery]);

  return matches;
};

// Usage
const MediaQueryExample = () => {
  const isSmallScreen = useMediaQuery("(max-width: 768px)");

  return (
    <div>
      {isSmallScreen ? <p>Small screen layout</p> : <p>Large screen layout</p>}
    </div>
  );
};