useMediaQuery

Reactively respond to media queries in your app.

✅ Features

  • Real-time screen size detection
  • Use CSS-like query strings
  • Super useful for responsive UIs

📦 Usage

1import { useMediaQuery } from './useMediaQuery';
2
3const isMobile = useMediaQuery('(max-width: 768px)');
4
5return <p>{isMobile ? "Mobile view" : "Desktop view"}</p>;

📋 Source Code

This is the full implementation of useMediaQuery

1import { useState, useEffect } from 'react';
2
3export function useMediaQuery(query: string): boolean {
4  const [matches, setMatches] = useState(false);
5
6  useEffect(() => {
7    const mediaQuery = window.matchMedia(query);
8    const handler = () => setMatches(mediaQuery.matches);
9    handler();
10    mediaQuery.addEventListener('change', handler);
11    return () => mediaQuery.removeEventListener('change', handler);
12  }, [query]);
13
14  return matches;
15}
16