|
|
|
|
@ -12,10 +12,23 @@ export const useMediaQuery = (query: string) => { |
|
|
|
|
const listener = (event: MediaQueryListEvent) => { |
|
|
|
|
setQueryMatches(event.matches) |
|
|
|
|
} |
|
|
|
|
mediaQuery.addEventListener('change', listener) |
|
|
|
|
|
|
|
|
|
try { |
|
|
|
|
// Chrome & Firefox & Safari version >= 14
|
|
|
|
|
mediaQuery.addEventListener('change', listener) |
|
|
|
|
} catch { |
|
|
|
|
// Safari
|
|
|
|
|
mediaQuery.addListener(listener) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return () => { |
|
|
|
|
mediaQuery.removeEventListener('change', listener) |
|
|
|
|
try { |
|
|
|
|
// Chrome & Firefox & Safari version >= 14
|
|
|
|
|
mediaQuery.removeEventListener('change', listener) |
|
|
|
|
} catch { |
|
|
|
|
// Safari
|
|
|
|
|
mediaQuery.removeListener(listener) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, [mediaQuery]) |
|
|
|
|
|
|
|
|
|
|