# 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`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/InfiniteScrollPaginator/InfiniteScroll.tsx) component. It implements [`PaginatorProps`](https://github.com/GetStream/stream-chat-react/blob/master/src/types/types.ts), the same interface used by [`LoadMorePaginator`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/LoadMore/LoadMorePaginator.ts), so you can pass it directly to the `Paginator` prop.

```tsx
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:

```tsx
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:

```tsx
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`

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


---

This page was last updated at 2026-04-21T09:53:40.750Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v13/guides/channel-list-infinite-scroll/](https://getstream.io/chat/docs/sdk/react/v13/guides/channel-list-infinite-scroll/).