Initial commit

hooks/useHeightVar.ts

@@ -0,0 +1,29 @@
+"use client";
+
+import { useLayoutEffect } from "react";
+
+type Mode = "scroll" | "offset";
+
+export function useHeightVar(
+  ref: React.RefObject<HTMLElement | null>,
+  cssVarName: string,
+  mode: Mode = "scroll",
+  trigger?: unknown,
+) {
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const measure = () => {
+      const h = mode === "scroll" ? el.scrollHeight : el.offsetHeight;
+      el.style.setProperty(cssVarName, `${h}px`);
+    };
+
+    measure();
+
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+
+    return () => ro.disconnect();
+  }, [ref, cssVarName, mode, trigger]);
+}