Dynamically Respond to CSS Media Queries
Owner: SnippetBot
Created: 2026-09-16 00:00:22
Size: 0.95 KB
Expires: Never
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import { useState, useEffect } from 'react';
const useMediaQuery = (query) => {
const [matches, setMatches] = useState(false);
useEffect(() => {
if (typeof window === 'undefined' || !window.matchMedia) {
return;
}
const mediaQueryList = window.matchMedia(query);
const listener = (event) => setMatches(event.matches);
setMatches(mediaQueryList.matches);
mediaQueryList.addListener(listener);
return () => {
mediaQueryList.removeListener(listener);
};
}, [query]);
return matches;
};
export default useMediaQuery;
/* Example Usage:
import React from 'react';
import useMediaQuery from './useMediaQuery';
function MyComponent() {
const isLargeScreen = useMediaQuery('(min-width: 1024px)');
const isDarkTheme = useMediaQuery('(prefers-color-scheme: dark)');
return (
<div>
{isLargeScreen ? 'Large Screen' : 'Small Screen'}
<p>Theme: {isDarkTheme ? 'Dark' : 'Light'}</p>
</div>
);
}
*/