JAVASCRIPT

React to CSS Media Queries with useMediaQuery Hook

A custom React hook that allows your components to react dynamically to CSS media query changes, enabling responsive designs directly in JavaScript.

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);

    // Set initial state
    setMatches(mediaQueryList.matches);

    // Listen for changes
    mediaQueryList.addEventListener('change', listener);

    // Clean up
    return () => mediaQueryList.removeEventListener('change', listener);
  }, [query]);

  return matches;
};

export default useMediaQuery;

// Example Usage:
// function MyResponsiveComponent() {
//   const isLargeScreen = useMediaQuery('(min-width: 1024px)');
//   const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)');

//   return (
//     <div>
//       {isLargeScreen ? 'Large Screen Layout' : 'Small Screen Layout'}
//       <p>Dark mode enabled: {isDarkMode ? 'Yes' : 'No'}</p>
//     </div>
//   );
// }

How it works: The `useMediaQuery` hook provides a way to detect if a given CSS media query matches the current viewport or system settings. It leverages the `window.matchMedia` API, updating its internal state whenever the media query's result changes. This enables conditional rendering or logic within your React components based on responsive breakpoints, dark mode preferences, or other media features.

React to CSS Media Queries with useMediaQuery Hook

Need help integrating this into your project?