Infinite Scroll

This example shows how to use infinite scroll with the SDK channel list.

By default, ChannelList uses LoadMorePaginator and loads more channels when LoadMoreButton is clicked. Infinite scroll instead loads more channels when the list approaches the bottom threshold.

Best Practices

• Keep threshold high enough to avoid visible loading gaps.
• Make sure the channel list container actually scrolls, or infinite scroll will never trigger.
• Set options.limit explicitly so the first page is large enough to create scrollable overflow.
• Keep pagination behavior in Paginator instead of spreading it across row components.
• Audit custom channel-list CSS against the current .str-chat__channel-list-messenger__main wrapper.

Plug In Infinite Scroll

The SDK ships with InfiniteScroll, which implements the same paginator contract as LoadMorePaginator.

import { ChannelList, InfiniteScroll } from "stream-chat-react";

<ChannelList
  filters={filters}
  options={options}
  Paginator={InfiniteScroll}
  sort={sort}
/>;

If you want to customize threshold, reverse, or other InfiniteScrollProps, wrap it in your own paginator component:

import {
  ChannelList,
  InfiniteScroll,
  type InfiniteScrollProps,
} from "stream-chat-react";

const Paginator = (props: InfiniteScrollProps) => (
  <InfiniteScroll {...props} threshold={50} />
);

<ChannelList
  filters={filters}
  options={options}
  Paginator={Paginator}
  sort={sort}
/>;

Make Sure The Container Scrolls

For infinite scroll to work, the channel list must be scrollable on first render.

1. Increase The Initial Page Size

If the initial list is too short to scroll, increase options.limit:

import type { ChannelOptions } from "stream-chat";

const options: ChannelOptions = {
  limit: 15,
  presence: true,
  state: true,
};

2. Constrain The Channel List Height

If needed, constrain the current list wrapper:

.str-chat__channel-list-messenger__main {
  max-height: 50%;
}