Open Channel list

A channel list shows a complete list of open channels available for the current user using the openChannelList module. Once the client app is connected to the Sendbird server, you can display the channel list. All chat services built with Sendbird UIKit begin from the channel list.

Usage

To start using the OpenChannelList module, implement the following code:

import { OpenChannelList } from '@sendbird/uikit-react/OpenChannelList';

const OpenChannelListPage = () => {
  return <OpenChannelList />
}

List of properties

The following table lists the properties of the OpenChannelList module.

Required	Type	Description
onChannelSelected	function	Specifies the prop to receive callback when selecting a channel in the channel list.

Optional	Type	Description
queries	object	Specifies an object { openChannelListQuery: OpenChannelListQueryParams }
className	string	Specifies the CSS custom name of the class. (Default: `null`)
renderHeader	ReactElement	Renders a customized header component to replace the default header. The following are given as arguments: - `channel`: `GroupChannel`, `user`: `User` (Default: `null`)
renderPlaceHolderError	ReactElement	Renders a customized placeholder for an error status in the channel list. (Default: `null`)
renderPlaceHolderLoading	ReactElement	Renders a customized placeholder for a loading status in the channel list. (Default: `null`)
renderPlaceHolderEmpty	ReactElement	Renders a customized placeholder for an empty list status when the channel list is empty. (Default: `null`)
renderChannelPreview	ReactElement	Renders a customized channel preview component to replace the default `channelPreview` component. Features such as typing indicators can be implemented in the custom component. The following are given as arguments: - `channel`: `GroupChannel` - `onLeaveChannel`: `function(channel, callback)` (Default: `null`)

Context

To store and handle data that are used to build a working channel list, Sendbird UIKit provides two context objects: OpenChannelListProvider and useOpenChannelListContext hook. OpenChannelListProvider is a provider that manages all the logic and data used in the channel list view. The useOpenChannelListContext is a context hook that allows access to the provider's data.

OpenChannelListProvider

OpenChannelListProvider contains input props and internal data that handle all the operations in the module. The provider stores data from Chat SDK in real-time and exports them to the UI components. The following code shows how to start using OpenChannelListProvider.

import React from 'react';
import { OpenChannelListProvider, useOpenChannelListContext } from '@sendbird/uikit-react/OpenChannelList';
import { OpenChannel } from '@sendbird/chat/openChannel';

// Custom channel preview component
const CustomChannelPreview = ({ channel }: { channel: OpenChannel }) => {
  return (
    <div>
      <h3>{channel.name}</h3>
      <p>Last message created: {channel.lastMessage?.createdAt || 'No messages yet'}</p>
    </div>
  );
};

// Custom channel list component
const CustomChannelList = () => {
  const {
    allChannels,
    fetchNextChannels,
    onChannelSelected,
  } = useOpenChannelListContext();

  return (
    <div>
      <h2>My Channels</h2>
      {allChannels.map((channel) => (
        <div key={channel.url} onClick={() => onChannelSelected(channel)}>
          <CustomChannelPreview channel={channel} />
        </div>
      ))}
      {fetchNextChannels && <button onClick={fetchNextChannels}>Load More</button>}
    </div>
  );
};

// Main component using OpenChannelListProvider
const ChannelListExample = () => {
  return (
    <OpenChannelListProvider>
      <CustomChannelList />
    </OpenChannelListProvider>
  );
};

List of properties

The following table lists the properties of OpenChannelListProvider.

Required	Type	Description
onChannelSelected	function	Specifies the prop to receive callback when selecting a channel in the channel list.

Optional	Type	Description
queries	object	Specifies an object { openChannelListQuery: OpenChannelListQueryParams }
className	string	Specifies the CSS custom name of the class. (Default: `null`)

useOpenChannelListContext

The useOpenChannelListContext context hook exports the data in the provider to the UI components to create a functional view of the channel list. Every UI component of any layer or level can get access to the data using the context hooks as long as they're inside the provider.

The following code shows how to start using useOpenChannelListContext.

import { useOpenChannelListContext } from '@sendbird/uikit-react/OpenChannelList/context';

const Component = () => {
  const context = useOpenChannelListContext();
  // ...
}

List of properties

The following table lists the properties of useOpenChannelListContext.

Property name	Type	Description
onChannelSelected	function	Specifies the prop to receive callback when selecting a channel in the channel list.
customOpenChannelListQuery	object	Specifies an OpenChannelListQueryParams.
logger	Logger	Specifies a logger
currentChannel	object	Specifies a current channel
allChannels	array of objects	Specifies a list of channels that are loaded in the list.
fetchingStatus	string	Specifies a current fetching status.
fetchNextChannels	function	Loads more channels in the list.
refreshOpenChannelList	function	Refreshes the list of channels.
openChannelListDispatcher	object	Specifies a open channel dispatcher.

UI components

The UI components in the OpenChannelList module are the following: OpenChannelListUI and OpenChannelPreview. They're the default set of UI components that compose the channel list view.

OpenChannelListUI

OpenChannelListUI is the component that displays the basic screen of the module. It contains placeholders for error and loading statuses and renders the header and channel preview. The following code shows how to implement OpenChannelListUI.

import OpenChannelListUI from '@sendbird/uikit-react/OpenChannelList/components/OpenChannelListUI';

List of properties

The following table lists the properties of OpenChannelListUI.

Property name	Type	Description
renderHeader	ReactElement	Renders a customized header component to replace the default header. The following are given as arguments: - `channel`: `GroupChannel`, `user`: `User` (Default: `null`)
renderPlaceHolderError	ReactElement	Renders a customized placeholder for an error status in the channel list. (Default: `null`)
renderPlaceHolderLoading	ReactElement	Renders a customized placeholder for a loading status in the channel list. (Default: `null`)
renderPlaceHolderEmpty	ReactElement	Renders a customized placeholder for an empty list status when the channel list is empty. (Default: `null`)
renderChannelPreview	ReactElement	Renders a customized channel preview component to replace the default `channelPreview` component. Features such as typing indicators can be implemented in the custom component. The following are given as arguments: - `channel`: `GroupChannel` - `onLeaveChannel`: `function(channel, callback)` (Default: `null`)

OpenChannelPreview

OpenChannelPreview is a component that displays a single channel in the list item UI. You can customize this component using renderChannelPreview.

The following code shows how to implement OpenChannelPreview.

import { OpenChannelPreview } from '@sendbird/uikit-react/OpenChannelList/components/OpenChannelPreview';

List of properties

Property name	Type	Description
channel	instance	Specifies the channel instance shown in the list item. (Default: `null`)
onClick	function	Specifies the prop to select a channel item in the list. (Default: `null`)
isSelected	boolean	Determines whether the channel displayed in the list item UI is currently active. (Default:`false`)

On this page

Usage Context

OpenChannelListProvider useOpenChannelListContext

UI components

OpenChannelListUI OpenChannelPreview

Sample app