Infinite Scroll

This example demonstrates how to implement infinite scroll with existing SDK components. By default, the SDK’s ChannelList component uses LoadMorePaginator to load more channels into the list. More channels are loaded every time the LoadMoreButton is clicked. The infinite scroll instead loads more channels based on the channel list container’s scroll position. The request to load more channels is automatically triggered, once the scroller approaches the bottom scroll threshold of the container.

How to plug in the infinite scroll

The SDK provides own InfiniteScroll component. This component implements the PaginatorProps interface. As this interface is implemented by the LoadMorePaginator too, we can just pass the InfiniteScroll into the ChannelList prop Paginator.

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
/>;

Especially the threshold prop may need to be set as the default is 250px. That may be too soon to load more channels.

What to take into consideration

For the infinite scroll to work, the element containing the ChannelPreview list has to be forced to display the scroll bar with the initial channel list load. This is achieved 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%;
}