[ReactJS hook] Detect Scrolls To Bottom

scrolling.js

import { useScrollPosition } from '@n8tb1t/use-scroll-position'
import { useRef } from 'react'
import { get } from 'lodash'

export const useOnEndScroll = (onEnd: () => void, disabled: boolean = false) => {
  const { body, documentElement } = document
  const isTracking = useRef<boolean>(true) // To avoid repeated requests
  const offsetFromBottom = 100

  useScrollPosition(
    ({ currPos }) => {
      if (disabled) {
        return
      }

      const scrollHeight = Math.max(
        get(body, 'scrollHeight'), // get is not necessary, using it to avoid Flow problems
        get(body, 'offsetHeight'),
        get(body, 'clientHeight'),
        get(documentElement, 'scrollHeight'),
        get(documentElement, 'offsetHeight'),
        get(documentElement, 'clientHeight'),
      )

      const windowHeight = window.innerHeight || get(documentElement, 'offsetHeight')
      const offset = -currPos.y + windowHeight + offsetFromBottom

      if (offset >= scrollHeight) {
        if (isTracking.current) {
          onEnd()
          isTracking.current = false
        }
      } else if (!isTracking.current) {
        isTracking.current = true
      }
    },
    [onEnd, disabled],
  )
}

usage.js

const PaginatedList = () => {
  const hasMore = true
  
  const request = useCallback(() => {
    ...
  }, [])
    
  useOnEndScroll(request, !hasMore)
    
  return (
     ...
  )
}