2023-08-17 20:57:46 -07:00
|
|
|
import { useCallback, useEffect, useState } from 'react'
|
2022-07-14 16:36:31 -07:00
|
|
|
|
2023-08-17 20:57:46 -07:00
|
|
|
export const useViewport = () => {
|
2022-07-14 16:36:31 -07:00
|
|
|
const [width, setWidth] = useState<number>(0)
|
2022-09-13 23:24:26 -07:00
|
|
|
const [height, setHeight] = useState<number>(0)
|
2022-07-14 16:36:31 -07:00
|
|
|
|
2022-09-13 23:24:26 -07:00
|
|
|
const handleWindowResize = useCallback(() => {
|
2022-07-14 16:36:31 -07:00
|
|
|
if (typeof window !== 'undefined') {
|
|
|
|
setWidth(window.innerWidth)
|
2022-09-13 23:24:26 -07:00
|
|
|
setHeight(window.innerHeight)
|
2022-07-14 16:36:31 -07:00
|
|
|
}
|
2022-09-13 23:24:26 -07:00
|
|
|
}, [])
|
2022-07-14 16:36:31 -07:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
handleWindowResize()
|
|
|
|
window.addEventListener('resize', handleWindowResize)
|
|
|
|
return () => window.removeEventListener('resize', handleWindowResize)
|
2022-09-13 23:24:26 -07:00
|
|
|
}, [handleWindowResize])
|
2022-07-14 16:36:31 -07:00
|
|
|
|
2022-09-13 23:24:26 -07:00
|
|
|
return { width, height }
|
2022-07-14 16:36:31 -07:00
|
|
|
}
|