The `useOnScreen` function is a custom React hook that detects whether a given element is currently visible on the scree

useOnScreen.ts

import { useEffect, useMemo, useState,RefObject } from "react";

export function useOnScreen(ref:RefObject<HTMLElement>):boolean {
	  const [isOnScreen, setIsOnScreen] = useState<boolean>(false);

	const observer = useMemo(
		() => new IntersectionObserver(([entry]) => setIsOnScreen(entry.isIntersecting)),
		// eslint-disable-next-line react-hooks/exhaustive-deps
		[ref]
	);

	useEffect(() => {
		observer.observe(ref.current);
		return () => observer.disconnect();
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

	return isOnScreen;
}