JAVASCRIPT
Reactively Track CSS Media Queries with useMediaQuery
Build a React hook, useMediaQuery, to dynamically respond to CSS media query changes, enabling responsive components based on screen size.
import { useState, useEffect } from 'react';
const useMediaQuery = (query) => {
const [matches, setMatches] = useState(false);
useEffect(() => {
const mediaQueryList = window.matchMedia(query);
const listener = (event) => setMatches(event.matches);
// Initial check
setMatches(mediaQueryList.matches);
// Listen for changes
mediaQueryList.addEventListener('change', listener);
return () => {
mediaQueryList.removeEventListener('change', listener);
};
}, [query]);
return matches;
};
export default useMediaQuery;
How it works: The `useMediaQuery` hook allows React components to reactively update based on CSS media query status. It takes a media query string (e.g., '(min-width: 768px)') as an argument and returns a boolean indicating whether the query currently matches. Internally, it uses `window.matchMedia` to create a `MediaQueryList` object. An event listener is attached to this list to update the component's state whenever the media query's matching status changes. The initial state is set on mount, and the listener is cleaned up on unmount.