reactuals/dist/hooks/useMediaQuery.js

A useful package providing a collection of 50+ React hooks and utilities to simplify React development.

import { useEffect, useState } from "react";
/**
 * Tracks the state of a media query.
 * @param query - The media query string.
 * @returns A boolean indicating if the query matches.
 *
 * Example:
 * const isLargeScreen = useMediaQuery("(min-width: 1024px)");
 * if (isLargeScreen) console.log("Large screen");
 */
export function useMediaQuery(query) {
    const [matches, setMatches] = useState(() => window.matchMedia(query).matches);
    useEffect(() => {
        const mediaQueryList = window.matchMedia(query);
        const listener = (event) => setMatches(event.matches);
        mediaQueryList.addEventListener("change", listener);
        return () => mediaQueryList.removeEventListener("change", listener);
    }, [query]);
    return matches;
}