JAVASCRIPT
How to use useMediaQuery hook for responsive design in React
Integrate responsive design into React components using the useMediaQuery hook, allowing components to react to CSS media query changes programmatically.
import { useState, useEffect } from 'react';
function useMediaQuery(query) {
const [matches, setMatches] = useState(false);
useEffect(() => {
const mediaQueryList = window.matchMedia(query);
const listener = (event) => setMatches(event.matches);
// Set initial state
setMatches(mediaQueryList.matches);
// Add listener for changes
mediaQueryList.addEventListener('change', listener);
return () => {
mediaQueryList.removeEventListener('change', listener);
};
}, [query]);
return matches;
}
// Example Usage:
// function ResponsiveText() {
// const isLargeScreen = useMediaQuery('(min-width: 1024px)');
//
// return (
// <p>
// This text is visible on {isLargeScreen ? 'large' : 'small'} screens.
// {isLargeScreen && <span> (Currently large screen)</span>}
// </p>
// );
// }
How it works: The useMediaQuery hook tracks the status of a given CSS media query. It uses window.matchMedia to get the current match status and adds an event listener for changes, updating the component's state (and triggering re-renders) whenever the media query's status flips. This enables dynamic styling or rendering based on screen size.