28 lines
671 B
TypeScript
28 lines
671 B
TypeScript
import { useLayoutEffect, useRef } from "react";
|
|
|
|
export function useFillRemainingHeight<T extends HTMLElement = HTMLDivElement>(offset = 0) {
|
|
const ref = useRef<T>(null);
|
|
|
|
useLayoutEffect(() => {
|
|
const el = ref.current;
|
|
if (!el) return;
|
|
|
|
const update = () => {
|
|
const top = Math.round(el.getBoundingClientRect().top + offset);
|
|
const newHeight = `calc(100dvh - ${top}px)`;
|
|
if (el.style.height !== newHeight) {
|
|
el.style.height = newHeight;
|
|
}
|
|
};
|
|
|
|
update();
|
|
|
|
const observer = new ResizeObserver(update);
|
|
observer.observe(document.body);
|
|
|
|
return () => observer.disconnect();
|
|
}, [offset]);
|
|
|
|
return ref;
|
|
}
|