33 lines
978 B
TypeScript
33 lines
978 B
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef } from 'react';
|
|
|
|
/**
|
|
* Calls `onIntersect` when the returned sentinel ref becomes visible near
|
|
* the bottom of the viewport — the standard "load more as you scroll"
|
|
* pattern, via IntersectionObserver rather than a scroll listener (cheaper,
|
|
* no manual throttling needed).
|
|
*/
|
|
export function useInfiniteScroll(onIntersect: () => void, enabled: boolean) {
|
|
const sentinelRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!enabled) return;
|
|
const el = sentinelRef.current;
|
|
if (!el) return;
|
|
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
if (entries[0]?.isIntersecting) onIntersect();
|
|
},
|
|
{ rootMargin: '400px' }, // start loading a bit before the sentinel is actually on screen
|
|
);
|
|
|
|
observer.observe(el);
|
|
return () => observer.disconnect();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [enabled, onIntersect]);
|
|
|
|
return sentinelRef;
|
|
}
|