hooks-belt/dist/hooks/useMediaQuery.js

A comprehensive collection of useful React hooks for common use cases

import { useState, useEffect } from 'react';
/**
 * A hook that provides a way to respond to media queries.
 * Automatically updates when the media query matches or doesn't match.
 *
 * @param query - The media query string (e.g., '(max-width: 768px)')
 * @returns A boolean indicating whether the media query matches
 *
 * @example
 * ```tsx
 * const isMobile = useMediaQuery('(max-width: 768px)')
 * const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
 *
 * return (
 *   <div className={isMobile ? 'mobile-layout' : 'desktop-layout'}>
 *     {isDarkMode ? 'Dark mode' : 'Light mode'}
 *   </div>
 * )
 * ```
 */
export function useMediaQuery(query) {
    const [matches, setMatches] = useState(() => {
        if (typeof window === 'undefined') {
            return false;
        }
        return window.matchMedia(query).matches;
    });
    useEffect(() => {
        if (typeof window === 'undefined') {
            return;
        }
        const mediaQuery = window.matchMedia(query);
        // Set the initial value
        setMatches(mediaQuery.matches);
        // Create event listener
        const handleChange = (event) => {
            setMatches(event.matches);
        };
        // Add event listener
        mediaQuery.addEventListener('change', handleChange);
        // Cleanup
        return () => {
            mediaQuery.removeEventListener('change', handleChange);
        };
    }, [query]);
    return matches;
}
//# sourceMappingURL=useMediaQuery.js.map