JAVASCRIPT
Adapt UI with `useMediaQuery` for Responsive React Components
Create a custom React hook to detect CSS media query matches, enabling dynamic component rendering or styling based on screen size or device capabilities.
import { useState, useEffect } from 'react';
function useMediaQuery(query) {
const [matches, setMatches] = useState(false);
useEffect(() => {
if (typeof window !== 'undefined') {
const mediaQueryList = window.matchMedia(query);
const listener = (event) => setMatches(event.matches);
// Set initial state
setMatches(mediaQueryList.matches);
// Listen for changes
mediaQueryList.addEventListener('change', listener);
return () => {
mediaQueryList.removeEventListener('change', listener);
};
}
}, [query]);
return matches;
}
// How to use it:
// function ResponsiveComponent() {
// const isLargeScreen = useMediaQuery('(min-width: 1024px)');
// return (
// <div>
// <h1>Current Screen Size: {isLargeScreen ? 'Large' : 'Small'}</h1>
// {isLargeScreen ? (
// <p>This content is visible on large screens.</p>
// ) : (
// <p>This content is visible on small screens.</p>
// )}
// </div>
// );
// }
How it works: The `useMediaQuery` hook allows React components to react to CSS media queries programmatically. It uses `window.matchMedia` to evaluate a given media query string and `addEventListener` to listen for changes. The `matches` state is updated whenever the media query's status changes, making components aware of changes in viewport size, orientation, or other media features for responsive UI design.