30 lines
672 B
TypeScript
30 lines
672 B
TypeScript
|
import { useEffect, useRef, RefObject } from "react";
|
||
|
|
|
||
|
|
export function useScrollToBottom<T extends HTMLElement>(): [
|
||
|
|
RefObject<T>,
|
||
|
|
RefObject<T>,
|
||
|
|
] {
|
||
|
|
const containerRef = useRef<T>(null);
|
||
|
|
const endRef = useRef<T>(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const container = containerRef.current;
|
||
|
|
const end = endRef.current;
|
||
|
|
|
||
|
|
if (container && end) {
|
||
|
|
const observer = new MutationObserver(() => {
|
||
|
|
end.scrollIntoView({ behavior: "instant", block: "end" });
|
||
|
|
});
|
||
|
|
|
||
|
|
observer.observe(container, {
|
||
|
|
childList: true,
|
||
|
|
subtree: true,
|
||
|
|
});
|
||
|
|
|
||
|
|
return () => observer.disconnect();
|
||
|
|
}
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return [containerRef, endRef];
|
||
|
|
}
|