Chat UIKit React v3

Chat UIKit React

Chat UIKit

React

Version 3

Group Channel list

A channel list shows a complete list of group channels that the current user is a member of by using the GroupChannelList 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. Note that it can only list channels that the current user is a member of and can't list other public channels the user hasn't joined.

Usage

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

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

const GroupChannelListPage = () => {
  return <GroupChannelList />
}

List of properties

The following table lists the properties of the GroupChannelList module.

Required	Type	Description
onChannelSelect	function	Specifies the prop to receive callback when selecting a channel in the channel list.
onCreateChannel	function	Specifies the prop to receive callback when a channel is created.

Optional	Type	Description
selectedChannelUrl	string	Specifies the URL of the currently selected channel within the channel list.
channelListQueryParams	object	Specifies a GroupChannelCollectionParams and GroupChannelFilter to filter channels in the channel list.
onUpdatedUserProfile	function	Specifies the prop to receive callback when a user profile has been successfully edited. (Default: `null`)
className	string	Specifies the CSS custom name of the class. (Default: `null`)
isTypingIndicatorEnabled	boolean	Determines whether the typing indicator appears on the channel list view. (Default: `False`)
isMessageReceiptStatusEnabled	boolean	Determines whether the message receipt status appears on the channel list view. The possible message receipt statuses are `pending`, `failed`, `sent`, `delivered`, and `read`. (Default: `False`)
disableAutoSelect	boolean	Determines whether the first channel in the channel list view is automatically selected. (Default: `False`)
onBeforeCreateChannel	function	Specifies the prop to execute custom operations before creating a channel. (Default: `null`)
onThemeChange	function	Specifies the prop to receive callback when the theme has changed between `Light` and `Dark`. (Default: `null`)
renderUserProfile	ReactElement	Renders a customized user profile preview dialog when selecting the profile avatar. The following are given as arguments: - `user`: `User`, `currentUserId`: `userId`, `close`: `function` (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`)
renderPlaceHolderEmptyList	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`)
allowProfileEdit	boolean	Determines whether to allow the user to edit their profile. (Default: `true`)

Context

To store and handle data that are used to build a working channel list, Sendbird UIKit provides two context objects: GroupChannelListProvider and useGroupChannelList hook. GroupChannelListProvider is a provider that manages all the logic and data used in the channel list view. The useGroupChannelList is a context hook that allows access to the provider's data, which are divided into state and actions properties.

GroupChannelListProvider

GroupChannelListProvider 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 GroupChannelListProvider.

import React from 'react';
import { GroupChannelListProvider, useGroupChannelList } from '@sendbird/uikit-react/GroupChannelList';
import { GroupChannel } from '@sendbird/chat/groupChannel';

// Custom channel preview component
const CustomChannelPreview = ({ channel }: { channel: GroupChannel }) => {
  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 {
    state: {
      groupChannels,
      loadMore,
      onChannelSelect,
    }
  } = useGroupChannelList();

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

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

List of properties

The following table lists the properties of GroupChannelListProvider.

Required	Type	Description
onChannelSelect	function	Specifies the prop to receive callback when selecting a channel in the channel list.
onCreateChannel	function	Specifies the prop to receive callback when a channel is created.

Optional	Type	Description
channelListQueryParams	object	Specifies a GroupChannelCollectionParams and GroupChannelFilter to filter channels in the channel list.
onUpdatedUserProfile	function	Specifies the prop to receive callback when a user profile has been successfully edited. (Default: `null`)
className	string	Specifies the CSS custom name of the class. (Default: `null`)
selectedChannelUrl	string	Specifies the selected channel's url. (Default: `null`)
onBeforeCreateChannel	function	Specifies the prop to execute custom operations before creating a channel. (Default: `null`)
onThemeChange	function	Specifies the prop to receive callback when the theme has changed between `Light` and `Dark`. (Default: `null`)
allowProfileEdit	boolean	Determines whether to allow the user to edit their profile. (Default: `true`)
disableAutoSelect	boolean	Determines whether to disable the auto select feature. If set to `true`, no channel is selected after an initial fetching. (Default: `false`)
disableUserProfile	boolean	Determines whether to display the user profile preview dialog when selecting the user avatar. If set to `true`, the user profile preview dialog is not shown. (Default: `true`)
renderUserProfile	ReactElement	Renders a customized user profile preview dialog when selecting the user avatar. The following are given as arguments: - `user`: `User`, `currentUserId`: `userId`, `close`: `function` (Default: `null`)
isTypingIndicatorEnabled	boolean	Determines whether the typing indicator feature is enabled. (Default: `false`)
isMessageReceiptStatusEnabled	boolean	Determines whether to display message receipt status. (Default: `false`)

useGroupChannelList

The useGroupChannelList custom 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 custom hook as long as it's inside the provider.

The useGroupChannelList custom hook exposes two distinct sets of properties: state and actions. The state provides the variables relevant to the component, while actions offers functions that perform operations that have a side effect on the state properties.

The following code shows how to start using useGroupChannelList.

import { useGroupChannelList } from '@sendbird/uikit-react/GroupChannelList/context';

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

List of state properties

The following table lists of the state properties of useGroupChannelList.

Property name	Type	Description
channelListQueryParams	object	Specifies a GroupChannelCollectionParams and GroupChannelFilter to filter channels in the channel list.
onUpdatedUserProfile	function	Specifies the prop to receive callback when a user profile has been successfully edited.
className	string	Specifies the CSS custom name of the class.
selectedChannelUrl	string	Specifies the selected channel's url.
onBeforeCreateChannel	function	Specifies the prop to execute custom operations before creating a channel.
onThemeChange	function	Specifies the prop to receive callback when the theme has changed between `Light` and `Dark`.
allowProfileEdit	boolean	Determines whether to allow the user to edit their profile.
disableAutoSelect	boolean	Determines whether to disable the auto select feature. If set to `true`, no channel is selected after an initial fetching.
disableUserProfile	boolean	Determines whether to display the user profile preview dialog when selecting the user avatar. If set to `true`, the user profile preview dialog is not shown.
isTypingIndicatorEnabled	boolean	Determines whether the typing indicator feature is enabled.
isMessageReceiptStatusEnabled	boolean	Determines whether to display message receipt status.
typingChannelUrls	array of string	Specifies a list of channel urls that an user is typing.
initialized	boolean	Determines whether the channel list is initialized.
groupChannels	array of objects	Specifies a list of channels that are loaded in the list.
loadMore	function	Loads more channels in the list.
refresh	function	Refreshes the list of channels.
refreshing	boolean	Determines whether the channel list is refreshing.
scrollRef	React.Ref	Specifies a ref that allows users to scroll to a specific message.

List of actions properties

The following table lists of the actions properties of useGroupChannelList.

Property name	Type	Description
setGroupChannels	function	Sets the `groupChannels`.

UI components

The UI components in the GroupChannelList module are the following: GroupChannelListUI, GroupChannelListHeader, and GroupChannelListItem. They're the default set of UI components that compose the channel list view.

GroupChannelListUI

GroupChannelListUI 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 GroupChannelListUI.

import GroupChannelListUI from '@sendbird/uikit-react/GroupChannelList/components/GroupChannelListUI';

List of properties

The following table lists the properties of GroupChannelListUI.

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`)
renderPlaceHolderEmptyList	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`)

GroupChannelListHeader

GroupChannelListHeader is the header component of the GroupChannelListUI that displays the title and a button to create a new channel.

The following code shows how to implement GroupChannelListHeader.

import { GroupChannelListHeader } from '@sendbird/uikit-react/GroupChannelList/components/GroupChannelListHeader';

List of properties

Property name	Type	Description
renderHeader	ReactElement	Renders a customized header to replace the default header. The following are given as arguments: - `channel`: `GroupChannel`, `user`: `User` (Default: `null`)
renderIconButton	ReactElement	Renders a customized icon button to create a new group channel. (Default: `null`)
allowProfileEdit	boolean	Determines whether to allow the user to edit their profile. (Default: `true`)

GroupChannelListItem

GroupChannelListItem 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 GroupChannelListItem.

import { GroupChannelListItem } from '@sendbird/uikit-react/GroupChannelList/components/GroupChannelListItem';

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`)
renderChannelAction	ReactElement	Renders a customized action on the channel list item when selected. (Default: `null`)
isSelected	boolean	Determines whether the channel displayed in the list item UI is currently active. (Default:`false`)

On this page

Usage Context

GroupChannelListProvider useGroupChannelList

UI components

GroupChannelListUI GroupChannelListHeader GroupChannelListItem

Sample app