18 lines
519 B
TypeScript
18 lines
519 B
TypeScript
import { useEffect } from 'react';
|
|
|
|
export function useMediaQueryChange({
|
|
breakpoint,
|
|
onChange,
|
|
}: {
|
|
breakpoint: number;
|
|
onChange: (e: MediaQueryListEvent) => void;
|
|
}) {
|
|
useEffect(() => {
|
|
const mediaQuery = window.matchMedia(`(min-width: ${breakpoint}px)`);
|
|
const onMediaQueryChange = (e: MediaQueryListEvent) => onChange(e);
|
|
mediaQuery.addEventListener('change', onMediaQueryChange);
|
|
|
|
return () => mediaQuery.removeEventListener('change', onMediaQueryChange);
|
|
}, [breakpoint, onChange]);
|
|
}
|