Infinite scroll component under the ref callback
npm install react-inf-scroller> You can copy and paste this component to your project!
ts
import { InfiniteScrollRef, InfiniteScroll } from 'react-inf-scroller'export function App() {
const [mockData, setMockData] = useState(new Array(12).fill(0))
// You can use useInfiniteQuery hook from @tanstack/react-query
// But for now we use mockData
const fetchMore = () => {
setMockData(prev => [...prev, new Array(12).fill(0)])
}
const handleEndReached = (entries: IntersectionObserverEntry[], _node: HTMLDivElement | null) => {
const entry = entries[0] // select first and once entry from array
if (entry.isInteresting) { // check if this entry is visible
fetchMore() // fetchMore
}
}
return (
{ref => items.map((item, idx, self) => (
{item}
))}
)
}
``I personaly prefer react-virtuoso, because this library is really simple, you can use it too <3