29 lines
860 B
TypeScript
29 lines
860 B
TypeScript
|
import { useEffect, useState } from "react";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Hook to get if the containerRef is scrolled to the bottom
|
||
|
|
*/
|
||
|
|
const useIsScrolledToBottom = (
|
||
|
|
ref: React.RefObject<HTMLDivElement | null>,
|
||
|
|
deps: any[] = [],
|
||
|
|
) => {
|
||
|
|
const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);
|
||
|
|
useEffect(() => {
|
||
|
|
const calculateIsScrolledToBottom = (e: any) => {
|
||
|
|
const { scrollHeight, offsetHeight, scrollTop } = e.target;
|
||
|
|
setIsScrolledToBottom(scrollHeight - (offsetHeight + scrollTop) < 10);
|
||
|
|
};
|
||
|
|
|
||
|
|
ref?.current?.addEventListener("scroll", calculateIsScrolledToBottom);
|
||
|
|
calculateIsScrolledToBottom({ target: ref.current });
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
ref?.current?.removeEventListener("scroll", calculateIsScrolledToBottom);
|
||
|
|
};
|
||
|
|
}, [ref?.current, ...deps]);
|
||
|
|
|
||
|
|
return isScrolledToBottom;
|
||
|
|
};
|
||
|
|
|
||
|
|
export default useIsScrolledToBottom;
|