struct-ui-components/src/hooks/useMediaQuery/useMediaQuery.ts

A collection of reusable, customizable React components built with TypeScript, Tailwind CSS, and Storybook. Designed for modern UI development with flexibility and scalability.

import { useEffect, useState } from "react";

export const useMediaQuery = (mediaQuery: string): boolean => {
  const [isMatch, setIsMatch] = useState<boolean>(false);

  useEffect(() => {
    const list = window.matchMedia(mediaQuery);

    const handleChange = (e: MediaQueryListEvent) => {
      setIsMatch(e.matches);
    };

    // Set initial state
    setIsMatch(list.matches);

    // Add listener
    list.addListener(handleChange);

    // Cleanup listener
    return () => {
      list.removeListener(handleChange);
    };
  }, [mediaQuery]);

  return isMatch;
};