Chat UIKit React v3
Chat UIKit React
Chat UIKit
React
Version 3

Channel list

Copy link

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.


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

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

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

List of properties

Copy link

The following table lists the properties of the GroupChannelList module.

RequiredTypeDescription

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.

OptionalTypeDescription

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

Copy link

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

GroupChannelListProvider

Copy link

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 { GroupChannelList } from '@sendbird/uikit-react/GroupChannelList';
import { useGroupChannelListContext, GroupChannelListProvider } from '@sendbird/uikit-react/GroupChannelList/context';

const MyPlaceholder = () => {
  const context = useGroupChannelListContext();
  return <div>{'MyPlaceholder'}</div>
};

const UsageWithModule = () => {
  return (
    <GroupChannelList
      renderPlaceHolderLoading={() => <MyPlaceholder />}
    />
  );
};


const MyComponent = () => {
  const context = useGroupChannelListContext();
  return <div>{'MyComponent'}</div>
};

const UsageWithProvider = () => {
  return (
    <GroupChannelListProvider>
      <MyComponent />
    <GroupChannelListProvider/>
  )
}

List of properties

Copy link

The following table lists the properties of GroupChannelListProvider.

RequiredTypeDescription

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.

OptionalTypeDescription

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)

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)

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)

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)

useGroupChannelListContext

Copy link

The useGroupChannelListContext 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 useGroupChannelListContext.

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

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

List of properties

Copy link

The following table lists the properties of useGroupChannelListContext.

Property nameTypeDescription

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.


UI components

Copy link

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

Copy link

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

Copy link

The following table lists the properties of GroupChannelListUI.

Property nameTypeDescription

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 list item component. The following are given as arguments:
- channel: GroupChannel
- onLeaveChannel: function(channel, callback) (Default: null)

GroupChannelListHeader

Copy link

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

Copy link
Property nameTypeDescription

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

Copy link

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

Copy link
Property nameTypeDescription

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)