erquhart•8mo 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/

The React Virtuoso component makes it trivial to implement infinite scrolling lists in both directions with variably sized items.

6 Replies

Nishil Faldu•8mo 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

erquhartOP•8mo ago

There should be an endless scroll hook with like 10 million monthly downloads on npm right now lol

Nishil Faldu•8mo 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.

erquhartOP•8mo ago

erquhartOP•8mo ago

seriously, good find, will try it next time I need to do endless on the web

Endless Scrolling | React Virtuoso

Did you find this page helpful?