Infinite Scroll

This example shows how to use infinite scroll with existing SDK components. By default, ChannelList uses LoadMorePaginator and loads more channels when LoadMoreButton is clicked. Infinite scroll instead loads based on scroll position, triggering a request when the list approaches the bottom threshold.

Best Practices

Keep threshold high enough to prevent visible loading gaps.
Ensure the list container actually scrolls or infinite scroll won’t trigger.
Tune initial limit so the list is long enough to enable scrolling.
Use InfiniteScroll only when list length is large enough to justify it.
Keep pagination logic centralized in Paginator rather than in list items.

How to plug in the infinite scroll

The SDK provides its own InfiniteScroll component. It implements PaginatorProps, the same interface used by LoadMorePaginator, so you can pass it directly to the Paginator prop.

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

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

If you would like to adjust the configuration parameters like threshold, reverse (PaginatorProps) or useCapture, etc. (InfiniteScrollProps), you can create a wrapper component where these props can be set:

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

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

// ...

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

You may want to tune threshold; the default is 250px, which can be too aggressive.

What to take into consideration

For infinite scroll to work, the element containing the ChannelPreview list must scroll from the initial load. You can do this by:

1. adjusting the initial number of loaded channels

Set a reasonable number of channels to be initially loaded. If loading 10 channels leads to them being visible without having to scroll, then increase the number to e.g. 15:

import type { ChannelOptions } from "stream-chat";
const options: ChannelOptions = { state: true, presence: true, limit: 15 };

2. adjusting the container height

You can change the container height so that not all channels are visible at once. You should target the container with class .str-chat__channel-list-messenger-react__main

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

ChannelSearch

Multiple Lists