first commt

resources/js/hooks/DimensionHook.tsx

@@ -0,0 +1,36 @@
+import {useEffect, useLayoutEffect, useRef, useState} from "react"
+
+const useDimension = () => {
+
+    const RESET_TIMEOUT = 300
+    let movement_timer: number|undefined = undefined
+    const targetRef = useRef<any>()
+    const [dimensions, setDimensions] = useState({ width:0, height: 0 })
+
+    useEffect(() => {
+        window.addEventListener('resize', ()=>{
+            clearInterval(movement_timer)
+            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