UIKit React v3
UIKit React
UIKit
React
Home
/
UIKit
/
React
This is the new Docs for UIKit v3 beta for React. To see the previous Docs, click here.

Group channel

A group channel is an invitation only channel that allows close interactions between a limited number of users and it's displayed using the Channel module. In order to join a group channel, an invitation from the channel member is required by default. Users can create 1-to-1 group channels or 1-to-N group channels and there's also a supergroup channel, which is an expanded version of a group channel that can accommodate more than 2,000 members in one channel.


Usage

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

import Channel from '@sendbird/uikit-react/Channel';

List of properties

The following table lists the properties of the Channel module.

Properties
RequiredTypeDescription

channelUrl

string

Specifies the URL of the group channel. (Default: null)

OptionalTypeDescription

useMessageGrouping

boolean

Determines whether to group messages based on the time they were sent in a channel. If a user sends multiple messages under one minute, those messages are grouped together and the time they were sent is displayed only once in the channel. (Default: true)

useReaction

boolean

Determines whether to use the reactions feature. (Default: true)

showSearchIcon

boolean

Determines whether to show the search icon in the channel title. (Default: false)

highlightedMessage

number

Specifies the message ID of the highlighted message in the channel. (Default: null)

startingPoint

number

Specifies the timestamp of the first message sent in the message list. It's used as the starting point to fetch the message list. If you change the value, the message list is fetched again. (Default: null)

onBeforeSendUserMessage

function

Specifies the prop to execute custom operations before sending a user message. The modified user message is returned through UserMessageParams before sending it. (Default: null)

onBeforeSendFileMessage

function

Specifies the prop to execute custom operations before sending a file message. The modified file message is returned through FileMessageParams before sending it. (Default: null)

onBeforeUpdateUserMessage

function

Specifies the prop to execute custom operations before updating a user message. (Default: null)

onChatHeaderActionClick

function

Specifies the prop to execute custom operations when the top-right icon in the header component is clicked. (Default: null)

onSearchClick

function

Specifies the prop to execute custom operations when the search icon in the header component is clicked. (Default: null)

replyType

string/enum

Specifies the type of message threading to be used. Acceptable values are: NONE and QUOTE_REPLY. (Default: NONE)

queries.messageListParams

instance

Specifies a query instance to retrieve a list of messages in a channel by passing the properties of MessageListParams as a parameter.

renderUserProfile

ReactElement

Renders a customized user profile preview dialog when selecting the user avatar. (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)

renderPlaceholderLoader

ReactElement

Renders a customized placeholder for a message loading status in the channel. (Default: null)

renderPlaceholderInvalid

ReactElement

Renders a customized placeholder for invalid channel state. (Default: null)

renderPlaceholderEmpty

ReactElement

Renders a customized placeholder for an empty channel status in the message list. (Default: null)

renderChannelHeader

ReactElement

Renders a customized channel header component. (Default: null)

renderMessage

ReactElement

Renders a customized message view in the channel. (Default: null)

renderMessageInput

ReactElement

Renders a customized message input component. (Default: null)

renderTypingIndicator

ReactElement

Renders a customized typing indicator component. (Default: null)

renderCustomSeperator

ReactElement

Renders a customized date separator view in the message list component. (Default: null)


Context

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

ChannelProvider

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

import { ChannelProvider } from '@sendbird/uikit-react/Channel/context';

List of properties

The following table lists the properties of ChannelProvider.

Properties
RequiredTypeDescription

channelUrl

string

Specifies the URL of the group channel. (Default: null)

OptionalTypeDescription

useMessageGrouping

boolean

Determines whether to group messages based on the time they were sent in a channel. If a user sends multiple messages under one minute, those messages are grouped together and the time they were sent is displayed only once in the channel. (Default: true)

useReaction

boolean

Determines whether to use the reactions feature. (Default: true)

showSearchIcon

boolean

Determines whether to show the search icon in the channel title. (Default: false)

highlightedMessage

number

Specifies the message ID of the highlighted message in the channel. (Default: null)

startingPoint

number

Specifies the timestamp of the first message sent in the message list. It's used as the starting point to fetch the message list. If you change the value, the message list is fetched again. (Default: null)

onBeforeSendUserMessage

function

Specifies the prop to execute custom operations before sending a user message. The modified user message is returned through UserMessageParams before sending it. (Default: null)

onBeforeSendFileMessage

function

Specifies the prop to execute custom operations before sending a file message. The modified file message is returned through FileMessageParams before sending it. (Default: null)

onBeforeUpdateUserMessage

function

Specifies the prop to execute custom operations before updating a user message. (Default: null)

onChatHeaderActionClick

function

Specifies the prop to execute custom operations when the top-right icon in the header component is clicked. (Default: null)

onSearchClick

function

Specifies the prop to execute custom operations when the search icon in the header component is clicked. (Default: null)

replyType

string/enum

Specifies the type of message threading to be used. Acceptable values are: NONE and QUOTE_REPLY. (Default: NONE)

queries.messageListParams

instance

Specifies a query instance to retrieve a list of messages in a channel by passing the properties of MessageListParams as a parameter.

renderUserProfile

ReactElement

Renders a customized user profile preview dialog when selecting the user avatar. (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)

useChannel

The useChannel context hook exports the data in the provider to the UI components to create a functional view of the group channel. 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 useChannel.

import { useChannel } from '@sendbird/uikit-react/Channel/context';
// Implement your code inside the react function component.
Const channelState = useChannel();
Const { scrollToMessage } = channelState;

List of properties

The following table lists the properties of useChannel.

Property nameTypeDescription

channelUrl

string

Specifies the URL of the group channel. (Default: null)

useMessageGrouping

boolean

Determines whether to group messages based on the time they were sent in a channel. If a user sends multiple messages under one minute, those messages are grouped together and the time they were sent is displayed only once in the channel. (Default: true)

useReaction

boolean

Determines whether to use the reactions feature. (Default: true)

showSearchIcon

boolean

Determines whether to show the search icon in the channel title. (Default: false)

highlightedMessage

number

Specifies the message ID of the highlighted message in the channel. (Default: null)

startingPoint

number

Specifies the timestamp of the first message sent in the message list. It's used as the start location to fetch the message list. If you change the value, the message list is fetched again. (Default: null)

onBeforeSendUserMessage

function

Specifies the prop to execute custom operations before sending a user message. The modified user message is returned through UserMessageParams before sending it. (Default: null)

onBeforeSendFileMessage

function

Specifies the prop to execute custom operations before sending a file message. The modified file message is returned through FileMessageParams before sending it. (Default: null)

onBeforeUpdateUserMessage

function

Specifies the prop to execute custom operations before updating a user message. (Default: null)

onChatHeaderActionClick

function

Specifies the prop to execute custom operations when the top-right icon in the header component is clicked. (Default: null)

onSearchClick

function

Specifies the prop to execute custom operations when the search icon in the header component is clicked. (Default: null)

replyType

string/enum

Specifies the type of message threading to be used. Acceptable values are: NONE and QUOTE_REPLY. (Default: NONE)

queries.messageListParams

instance

Specifies a query instance to retrieve a list of messages in a channel by passing the properties of MessageListParams as a parameter.

renderUserProfile

ReactElement

Renders a customized user profile preview dialog when selecting the user avatar. (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)

allMessages

array of objects

Specifies a list of all messages in the channel.

initialized

boolean

Determines whether the channel is initialized.

loading

boolean

Determines whether the channel is loading.

currentGroupChannel

Sendbird.GroupChannel

Specifies the current user's group channel.

hasMorePrev

boolean

Determines whether to retrieve previous messages at the top of the channel.

oldestMessageTimeStamp

number

Specifies the timestamp of the oldest message in the channel.

hasMoreNext

boolean

Determines whether to retrieve more messages in the channel.

lastMessageTimestamp

number

Specifies the timestamp of the latest sent message in the channel.

scrollToMessage

function

Specifies the function to locate and scroll to a specified message.

quoteMessage

user, admin or file

Specifies a message that already has a reply in the channel.

setQuoteMessage

function

Sets a message as a quoted message in the channel.

initialTimeStamp

number

Specifies the timestamp of the starting point in a channel. This parameter can be set to initialize the channel from a specific date and time using setInitialTimeStamp.

setInitialTimeStamp

function

Sets the timestamp of the starting point in a channel. You can initialize the channel to start from the set date and time.

animatedMessageId

string or number

Specifies the ID of a message that has an embedded animation when selected.

setAnimatedMessageId

function

Sets a message as an animated message in the channel.

highLightedMessageId

string or number

Specifies the ID of a message that appears in the center of the view when selected.

setHighLightedMessageId

function

Sets a message as a highlighted message in the channel.

nicknamesMap

string

Specifies a set of all the user nicknames in the channel.

scrollRef

React.Ref

Specifies a ref that allows users to scroll to a specific message.

messageInputRef

React.Ref

Specifies a ref that allows users to enter a message in the MessageInput component.


UI components

The UI components in the Channel module are the following: ChannelUI, ChannelHeader, MessageInput, MessageList, FileViewer, FrozenNotification, Message, RemoveMessageModal, TypingIndicator, and UnreadCount. They're the default set of UI components that compose the group channel view.

ChannelUI

ChannelUI is the component that displays the basic screen of the module. It contains placeholders for error and loading statuses and renders various components shown in the screen. The following code shows how to implement ChannelUI.

import channelUI from '@sendbird/uikit-react/Channel/components/ChannelUI';

List of properties

The following table lists the properties of ChannelUI.

Property nameTypeDescription

renderPlaceholderLoader

ReactElement

Renders a customized placeholder for a message loading status in the channel. (Default: null)

renderPlaceholderInvalid

ReactElement

Renders a customized placeholder for invalid channel state. (Default: null)

renderPlaceholderEmpty

ReactElement

Renders a customized placeholder for an empty channel status in the message list. (Default: null)

renderChannelHeader

ReactElement

Renders a customized channel header component. (Default: null)

renderMessage

ReactElement

Renders a customized message view in the channel. (Default: null)

renderMessageInput

ReactElement

Renders a customized message input component. (Default: null)

renderTypingIndicator

ReactElement

Renders a customized typing indicator component. (Default: null)

renderCustomSeperator

ReactElement

Renders a customized date separator view in the message list component. (Default: null)

ChannelHeader

ChannelHeader is the header component of the ChannelUI that displays the channel title, a message search icon, and channel information icon in the top-right corner.

The following code shows how to implement ChannelHeader.

import ChannelHeader from '@sendbird/uikit-react/Channel/components/ChannelHeader';

MessageInput

MessageInput is the component where users can enter a user message or send a file message such as an image, video, or a document file. See the code below on how to implement MessageInput.

import MessageInput from '@sendbird/uikit-react/Channel/components/MessageInput';

MessageList

The MessageList component shows a list of all messages exchanged in the group channel in a chronological order. The list shows both user and file messages and messages sent by the current user are differentiated from those sent by other members by color. The following code shows how to implement MessageList.

import MessageList from '@sendbird/uikit-react/Channel/components/MessageList';

List of properties

The following table lists the properties of MessageList.

Property nameTypeDescription

renderMessage

ReactElement

Renders a customized message view in the channel. (Default: null)

renderPlaceholderEmpty

ReactElement

Renders a customized placeholder for an empty channel status in the message list. (Default: null)

renderCustomSeperator

ReactElement

Renders a customized date separator view in the message list component. (Default: null)

Message

Message is a component within the MessageList component that displays the individual messages in the channel. It uses the renderMessage prop to create a message view. See the code below on how to implement Message.

import Message from '@sendbird/uikit-react/Channel/components/Message';

List of properties

The following table lists the properties of Message.

Properties
RequiredTypeDescription

message

user, admin or file

Specifies the message to be displayed in the message list component of the channel. (Default: null)

OptionalTypeDescription

hasSeparator

boolean

Determines whether to render a customized date separator view in the message list component that separates the messages by date. (Default: false)

chainTop

boolean

Determines whether to group the message with previously sent messages. (Default: false)

chainBottom

boolean

Determines whether to group the message with other messages that were sent afterward. (Default: false)

renderMessage

ReactElement

Renders a customized message view in the channel. (Default: null)

renderCustomSeparator

ReactElement

Renders a customized date separator view in the message list component. (Default: null)

renderEditInput

ReactElement

Renders a customized view of the message input when editing a message. (Default: null)

renderMessageContent

ReactElement

Renders a customized message content area that acts as a message bubble in the message list. (Default: null)

FileViewer

FileViewer is a component that displays all messages containing image files and video files. It's the outermost layer of the app in the Channel module. The image and video file types that are supported in Sendbird UIKit are shown in the table below.

ImageVideo

image/jpeg
image/jpg
image/png
image/gif
image/svg+xml
image/webp

video/mpeg
video/ogg
video/webm
video/mp4

The following code shows how to implement FileViewer.

import FileViewer from '@sendbird/uikit-react/Channel/components/FileViewer';

List of properties

The following table lists the properties of FileViewer.

Property nameTypeDescription

onCancel

function

Specifies the prop to execute custom operations when the close button is clicked. (Default: null)

message

user, admin or file

Specifies the message to be displayed in the message list component of the channel. (Default: null)

FrozenNotification

FrozenNotification is a component that displays a banner saying that the current channel is frozen. The component is placed right under the header. See the code below on how to implement FrozenNotification.

import FrozenNotification from '@sendbird/uikit-react/Channel/components/FrozenNotification';

RemoveMessageModal

RemoveMessageModal is a component that displays a modal confirming that the selected message is going to be deleted from the channel. See the code below on how to implement RemoveMessageModal.

import RemoveMessageModal from '@sendbird/uikit-react/Channel/components/RemoveMessageModal';

List of properties

The following table lists the properties of RemoveMessageModal.

Property nameTypeDescription

onCancel

function

Specifies the prop to execute custom operations when the close button is clicked. (Default: null)

message

user, admin or file

Specifies the message to be deleted from the message list component of the channel. (Default: null)

TypingIndicator

TypingIndicator shows which member in the channel is currently typing a message in the message input component. It's displayed below the message input field. See the code below on how to implement TypingIndicator.

import TypingIndicator from '@sendbird/uikit-react/Channel/components/TypingIndicator';

UnreadCount

UnreadCount is a component that displays how many unread messages there are in a channel. This component is shown below the channel header in the channel list screen. See the code below on how to implement UnreadCount.

import UnreadCount from '@sendbird/uikit-react/Channel/components/UnreadCount';

List of properties

The following table lists the properties of UnreadCount.

Property nameTypeDescription

count

number

Specifies the number of the unread messages there are in the channel that the current user is a member of. (Default: 0)

time

string

Specifies the starting time of when the messages are counted as unread. (Default: nul)

onClick

function

Specifies the prop to execute custom operations when the count number is clicked. (Default: null)