progress

src/lib/hooks/dimension.ts

@@ -0,0 +1,21 @@
+import { RefObject, useMemo, useSyncExternalStore } from "react"
+
+function subscribe(callback: (e: Event) => void) {
+  window.addEventListener("resize", callback)
+  return () => {
+    window.removeEventListener("resize", callback)
+  }
+}
+
+function useDimensions(ref: RefObject<HTMLElement>) {
+  const dimensions = useSyncExternalStore(
+    subscribe,
+    () => JSON.stringify({
+      width: ref.current?.offsetWidth ?? 0,
+      height: ref.current?.offsetHeight ?? 0,
+    }),
+  )
+  return useMemo(() => JSON.parse(dimensions), [dimensions])
+}
+
+export { useDimensions }