blob: 50ac0385fdf7a276b2358782b4ccaf7cf954458a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
import { useEffect } from 'react';
export type UseMatchMediaCallback = (ev: MediaQueryListEvent) => void;
/**
* React hook to watch for media changes based on the given query.
*
* @param {string} query - A media query.
* @param {UseMatchMediaCallback} cb - A callback function to execute on change.
*/
export const useMatchMedia = (query: string, cb: UseMatchMediaCallback) => {
useEffect(() => {
window.matchMedia(query).addEventListener('change', cb);
return () => window.matchMedia(query).removeEventListener('change', cb);
}, [cb, query]);
};
|
