Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 112x 112x 112x 39x 112x | import { useEffect, useRef, useState } from "react";
/**
* Hook to track if an element's height is below a given threshold.
* Returns a ref to attach to the element and a boolean flag.
*
* @param threshold - height in pixels to compare against
*/
export function useHeightThreshold(threshold: number) {
const ref = useRef<HTMLDivElement | null>(null);
const [isBelowThreshold, setIsBelowThreshold] = useState(false);
useEffect(() => {
Eif (!ref.current) return;
const observer = new ResizeObserver(([entry]) => {
const height = entry.contentRect.height;
setIsBelowThreshold(height < threshold);
});
observer.observe(ref.current);
return () => observer.disconnect();
}, [threshold]);
return { ref, isBelowThreshold };
}
|