30 lines
888 B
TypeScript
30 lines
888 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(true);
|
|
useEffect(() => {
|
|
const calculateIsScrolledToBottom = (e: any) => {
|
|
if (!e.target) return;
|
|
const { offsetHeight, scrollHeight, 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;
|