erquhart
erquhart8mo ago

Endless Scrolling | React Virtuoso

Surprised there's still no go-to infinite scroll lib for react (that isn't outdated or overly low level). I've used Virtuoso in the past, it's not lightweight but it is plug and play. Here's their example for endless scroll, you can plug a Convex paginated query loadMore() right in there: https://virtuoso.dev/endless-scrolling/
Endless Scrolling | React Virtuoso
The React Virtuoso component makes it trivial to implement infinite scrolling lists in both directions with variably sized items.
6 Replies
Nishil Faldu
Nishil Faldu8mo ago
useEffect(() => {
const handleScroll = () => {
console.log("from scroll");
if (
window.innerHeight + window.scrollY >=
document.body.offsetHeight - 500 &&
status === "CanLoadMore" &&
!loadingMore
) {
setLoadingMore(true);
loadMore(4);
setLoadingMore(false);
}
};

window.addEventListener("scroll", handleScroll);

return () => {
window.removeEventListener("scroll", handleScroll);
};
}, [status, loadingMore, loadMore]);
useEffect(() => {
const handleScroll = () => {
console.log("from scroll");
if (
window.innerHeight + window.scrollY >=
document.body.offsetHeight - 500 &&
status === "CanLoadMore" &&
!loadingMore
) {
setLoadingMore(true);
loadMore(4);
setLoadingMore(false);
}
};

window.addEventListener("scroll", handleScroll);

return () => {
window.removeEventListener("scroll", handleScroll);
};
}, [status, loadingMore, loadMore]);
this is what I did before you replied lol. I will definitely look into this library, did skim through it and seems pretty good
erquhart
erquhartOP8mo ago
There should be an endless scroll hook with like 10 million monthly downloads on npm right now lol
Nishil Faldu
Nishil Faldu8mo ago
https://www.npmjs.com/package/react-intersection-observer ended up using, kind of makes it a one line solution and its lightweight too
npm
react-intersection-observer
Monitor if a component is inside the viewport, using IntersectionObserver API. Latest version: 9.13.0, last published: a month ago. Start using react-intersection-observer in your project by running npm i react-intersection-observer. There are 1106 other projects in the npm registry using react-intersection-observer.
erquhart
erquhartOP8mo ago
No description
erquhart
erquhartOP8mo ago
No description
erquhart
erquhartOP8mo ago
seriously, good find, will try it next time I need to do endless on the web

Did you find this page helpful?