38 lines
953 B
TypeScript
38 lines
953 B
TypeScript
import {useEffect, useLayoutEffect, useRef, useState} from "react"
|
|
|
|
const useDimension = () => {
|
|
|
|
const RESET_TIMEOUT = 300
|
|
let movement_timer: number|undefined = undefined
|
|
const targetRef = useRef<HTMLDivElement>()
|
|
const [dimensions, setDimensions] = useState({ width:0, height: 0 })
|
|
|
|
useEffect(() => {
|
|
window.addEventListener('resize', ()=>{
|
|
clearInterval(movement_timer)
|
|
// @ts-expect-error setTimeout defined in var
|
|
movement_timer = setTimeout(testDimensions, RESET_TIMEOUT)
|
|
})
|
|
})
|
|
|
|
useLayoutEffect(() => {
|
|
testDimensions()
|
|
}, [])
|
|
|
|
const testDimensions = () => {
|
|
if (targetRef.current) {
|
|
setDimensions({
|
|
width: targetRef.current.offsetWidth,
|
|
height: targetRef.current.offsetHeight
|
|
})
|
|
}
|
|
}
|
|
|
|
return {
|
|
targetRef,
|
|
dimensions,
|
|
}
|
|
}
|
|
|
|
export default useDimension
|