44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import { useCallback, useEffect, useMemo, useState } from 'react'
|
|
|
|
export const breakpoints = {
|
|
sm: 640,
|
|
// => @media (min-width: 640px) { ... }
|
|
|
|
md: 768,
|
|
// => @media (min-width: 768px) { ... }
|
|
|
|
lg: 1024,
|
|
// => @media (min-width: 1024px) { ... }
|
|
|
|
xl: 1280,
|
|
// => @media (min-width: 1280px) { ... }
|
|
}
|
|
|
|
export const useViewport = () => {
|
|
const [height, setHeight] = useState(0)
|
|
const [width, setWidth] = useState(0)
|
|
|
|
const handleWindowResize = useCallback(() => {
|
|
if (typeof window !== 'undefined') {
|
|
setHeight(window.innerHeight)
|
|
setWidth(window.innerWidth)
|
|
}
|
|
}, [])
|
|
// store the window width and height on resize
|
|
useEffect(() => {
|
|
handleWindowResize()
|
|
window.addEventListener('resize', handleWindowResize)
|
|
return () => window.removeEventListener('resize', handleWindowResize)
|
|
}, [handleWindowResize])
|
|
|
|
const [isMobile, isTablet, isDesktop] = useMemo(() => {
|
|
if (!width) return [false, false, false]
|
|
const mobile = width < breakpoints.sm
|
|
const tablet = width >= breakpoints.sm && width < breakpoints.lg
|
|
const desktop = width >= breakpoints.lg
|
|
return [mobile, tablet, desktop]
|
|
}, [width])
|
|
|
|
return { width, height, isMobile, isTablet, isDesktop }
|
|
}
|