Introduction
I had a hard time implementing a react infinite scroll feature so I decided to make an npm package to make it super simple. If you have ever tried to implement a react infinite scroll feature you might have seen react-infinite-scroll-component and react-finite-scroller. The problem with these packages are:
- They are large, which makes them hard to customize.
- Written as class component, also hard to customize.
- Uses the event listener on the scroll event which is not performant. Mine uses the modern intersection observer API.
Better React Infinite Scroll
Install or just copy and paste...
import React, { useEffect, useRef } from "react";
interface InfiniteScrollProps extends React.ComponentPropsWithRef<"div"> {
fetchNextPage: () => any;
hasNextPage: boolean;
loadingMessage: React.ReactNode;
endingMessage: React.ReactNode;
}
export default function InfiniteScroller(props: InfiniteScrollProps) {
const {
fetchNextPage,
hasNextPage,
loadingMessage,
endingMessage,
children,
...rest
} = props;
const observerTarget = useRef(null);
useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
if (entries[0]?.isIntersecting) {
void fetchNextPage();
}
},
{ threshold: 1 }
);
if (observerTarget.current) {
observer.observe(observerTarget.current);
}
return () => {
if (observerTarget.current) {
observer.unobserve(observerTarget.current);
}
};
}, [observerTarget]);
return (
<div {...rest} style={{ overflowAnchor: "none" }}>
{children}
<div ref={observerTarget}></div>
{hasNextPage && loadingMessage}
{!hasNextPage && endingMessage}
</div>
);
}
How to use: normal scroll
import InfiniteScroller from "better-react-infinite-scroll";
return (
<InfiniteScroller
fetchNextPage={fetchNextPage}
hasNextPage={hasNextPage}
loadingMessage={<p>Loading...</p>}
endingMessage={<p>The beginning of time...</p>}
>
{elements.map((el) => (
<div key={el.id}>{el}</div>
))}
</InfiniteScroller>
);
How to use: inverse scroll
For inverse scroll, use flex-direction: column-reverse. Scoller height must be defined. Here we use tailwind flex-1 (flex: 1 1 0%) but height: 300px would also work for example.
import InfiniteScroller from "better-react-infinite-scroll";
return (
<div className="flex h-screen flex-col">
<InfiniteScroller
fetchNextPage={fetchNextPage}
hasNextPage={hasNextPage}
loadingMessage={<p>Loading...</p>}
endingMessage={<p>The beginning of time...</p>}
className="flex flex-1 flex-col-reverse overflow-auto"
>
{elements.map((el) => (
<div key={el.id}>{el}</div>
))}
</InfiniteScroller>
</div>
);
Full example with tRPC and React Query (TanStack Query)
import InfiniteScroller from "better-react-infinite-scroll";
//if using with tRPC
const { data, fetchNextPage, hasNextPage } = api.main.getAll.useInfiniteQuery(
{
limit: 25,
},
{
getNextPageParam: (lastPage) => lastPage.nextCursor,
}
);
//if using with React Query (TanStack)
const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({
queryKey: ["projects"],
queryFn: fetchProjects,
getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
});
function aggregatePosts() {
const pages = data?.pages;
const posts = pages?.reduce((prev, current) => {
const combinedPosts = prev.posts.concat(current.posts);
const shallowCopy = { ...prev };
shallowCopy.posts = combinedPosts;
return shallowCopy;
}).posts;
return posts;
}
return (
<>
<InfiniteScroller
fetchNextPage={fetchNextPage}
hasNextPage={hasNextPage}
loadingMessage={<p>Loading...</p>}
endingMessage={<p>The beginning of time...</p>}
>
{aggregatePosts()?.map((post) => (
<li key={post.id}>{post.content}</li>
))}
</InfiniteScroller>
</>
);
Top comments (0)