useOnScreen.ts

const useOnScreen = (ref: ObjectRef, rootMargin: number = 0) => {
	const ioSupported = 'IntersectionObserver' in window
	const [visible, setVisible] = useState(false)

	/* fallback for browsers with no IntersectionObserver support */
	useOnScreenFallback({ ref, ioSupported, setVisible })

	useEffect(() => {
		if (!ioSupported) {
			return
		}

		const observer = new window.IntersectionObserver(
			([entry]) => setVisible(entry.isIntersecting),
			{ rootMargin: `${rootMargin * getRem()}px` }
		)

		if (ref.current) {
			observer.observe(ref.current)
		}

		return () => {
			observer.unobserve(ref.current)
		}
	}, [])

	return visible
}