40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
|
|
// Follows https://tailwindcss.com/docs/responsive-design
|
|
export const MediaQueryBreakpoints = {
|
|
sm: '(min-width: 640px)',
|
|
md: '(min-width: 768px)',
|
|
lg: '(min-width: 1024px)',
|
|
xl: '(min-width: 1280px)',
|
|
'2xl': '(min-width: 1536px)',
|
|
pointerFine: '(pointer: fine)',
|
|
} as const
|
|
|
|
export const useMediaQuery = (mediaQuery: string) => {
|
|
const [matches, setMatches] = useState(() => window.matchMedia(mediaQuery).matches)
|
|
|
|
useEffect(() => {
|
|
const handler = (event: MediaQueryListEvent) => {
|
|
setMatches(event.matches)
|
|
}
|
|
|
|
const mq = window.matchMedia(mediaQuery)
|
|
if (mq.addEventListener != undefined) {
|
|
mq.addEventListener('change', handler)
|
|
} else {
|
|
mq.addListener(handler)
|
|
}
|
|
|
|
return () => {
|
|
const mq = window.matchMedia(mediaQuery)
|
|
if (mq.removeEventListener != undefined) {
|
|
mq.removeEventListener('change', handler)
|
|
} else {
|
|
mq.removeListener(handler)
|
|
}
|
|
}
|
|
}, [mediaQuery])
|
|
|
|
return matches
|
|
}
|