# 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-inner__main` wrapper.

## Plug In Infinite Scroll

The SDK ships with [`InfiniteScroll`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/InfiniteScrollPaginator/InfiniteScroll.tsx), which implements the same paginator contract as `LoadMorePaginator`.

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

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

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

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

---

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