Scroll Detector

import React, { useEffect } from 'react'
 
interface IScrollDetector {
  onScrollEnd: Function
  children: React.ReactNode
}
 
export const ScrollDecter = ({ onScrollEnd, children }: IScrollDetector) => {
  let prevScrollTop: number = 0
 
  function handleScroll() {
    const { scrollTop, scrollHeight, clientHeight } = document.documentElement
 
    if (scrollTop > prevScrollTop) {
      if (scrollTop + clientHeight >= scrollHeight - 700) {
        onScrollEnd()
      }
    }
    prevScrollTop = scrollTop
  }
 
  useEffect(() => {
    window.addEventListener('scroll', handleScroll)
    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [])
 
  return <div>{children}</div>
}

<ScrollDetector onScrollEnd={fetchFunction}>
    <></>
</ScrollDector>