30 lines
627 B
TypeScript
30 lines
627 B
TypeScript
"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]);
|
|
}
|