47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import { useEffect, useRef, useState } from 'react'
|
|
|
|
export const useFetchMore = (callback: () => void, delay = 500): void => {
|
|
const [first, setFirst] = useState(true)
|
|
const throttleTimeout = useRef<NodeJS.Timeout | undefined>(undefined)
|
|
|
|
useEffect(() => {
|
|
if (typeof window === 'undefined') {
|
|
return
|
|
}
|
|
|
|
const callbackInternal = (): void => {
|
|
const { scrollTop, scrollHeight, clientHeight } =
|
|
window.document.documentElement
|
|
|
|
if (scrollTop + clientHeight >= scrollHeight - scrollHeight / 3) {
|
|
console.log(
|
|
'calling fetchMore: scrollTop + clientHeight >= scrollHeight - scrollHeight / 3',
|
|
scrollTop,
|
|
clientHeight,
|
|
scrollHeight,
|
|
scrollHeight / 3
|
|
)
|
|
callback()
|
|
}
|
|
throttleTimeout.current = undefined
|
|
}
|
|
|
|
const handleScroll = () => {
|
|
if (first) {
|
|
setFirst(false)
|
|
callbackInternal()
|
|
return
|
|
}
|
|
if (typeof throttleTimeout.current === 'undefined') {
|
|
throttleTimeout.current = setTimeout(callbackInternal, delay)
|
|
}
|
|
}
|
|
|
|
window.addEventListener('scroll', handleScroll)
|
|
|
|
return () => {
|
|
window.removeEventListener('scroll', handleScroll)
|
|
}
|
|
}, [callback, delay, first, setFirst])
|
|
}
|