JAVASCRIPT
Respond to CSS Media Queries in React
Create a `useMediaQuery` React hook to declaratively respond to CSS media queries, enabling dynamic component rendering based on screen size or other viewport properties.
import { useState, useEffect } from 'react';
function useMediaQuery(query) {
const [matches, setMatches] = useState(false);
useEffect(() => {
if (typeof window === 'undefined' || !window.matchMedia) {
return; // Server-side rendering or unsupported browser
}
const mediaQueryList = window.matchMedia(query);
const listener = (event) => {
setMatches(event.matches);
};
// Set initial state
setMatches(mediaQueryList.matches);
// Listen for changes
mediaQueryList.addListener(listener);
// Clean up
return () => {
mediaQueryList.removeListener(listener);
};
}, [query]);
return matches;
}
export default useMediaQuery;
// Example Usage:
// function ResponsiveComponent() {
// const isLargeScreen = useMediaQuery('(min-width: 1024px)');
//
// return (
// <div>
// {isLargeScreen ? (
// <h1>Content for large screens</h1>
// ) : (
// <h2>Content for small screens</h2>
// )}
// <p>Current screen size is {isLargeScreen ? 'large' : 'small'}.</p>
// </div>
// );
// }
How it works: The `useMediaQuery` hook provides a way to detect if a specific CSS media query currently matches. It uses `window.matchMedia` to listen for changes in the media query status and updates its internal state accordingly. This enables React components to render different content or styles dynamically based on screen size, orientation, or other media features, facilitating truly responsive UIs.