Chat UIKit React v3

Chat UIKit React

Chat UIKit

React

Version 3

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 GroupChannel 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 GroupChannel module, implement the following code:

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

List of properties

The following table lists the properties of the GroupChannel module.

Properties

Required	Type	Description
channelUrl	string	Specifies the URL of the group channel. You can find this URL from the `url` property of the `GroupChannel`, or find it on your Sendbird Dashboard.

Optional	Type	Description
animatedMessageId	number	Specifies the message ID to apply the animation effect. (Default: `null`)
messageListQueryParams	instance	Specifies a MessageCollectionParams and MessageFilterParams to filter messages in the list.
isMessageGroupingEnabled	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`)
isReactionEnabled	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`)
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 `UserMessageCreateParams` 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 `FileMessageCreateParams` before sending it. (Default: `null`)
onBeforeUpdateUserMessage	function	Specifies the prop to execute custom operations before updating a user message. The modified user message is returned through `UserMessageUpdateParams` before updating it. (Default: `null`)
onChatHeaderActionClick	function	Specifies the prop to execute custom operations when the top-right icon in the header component is clicked. (Default: `null`)
onBackClick	function	Specifies the prop to execute custom operations when the back icon in the top-left of 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`)
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`)
disableMarkAsRead	boolean	Determines whether to turn off the `markAsRead` option when a user enters a group channel. If set to `true`, the read receipt feature is turned off. (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`)
renderCustomSeparator	ReactElement	Renders a customized date separator view in the message list component. (Default: `null`)

BasicLoaderMessageInputWrapperQueriesMessages

import '@sendbird/uikit-react/dist/index.css';

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

const ChannelPage = () => {
  return (
    <SendbirdProvider
      appId={'MY_APP_ID'}
      userId={'MY_USER_ID'}
    >
      {/* GroupChannel should be always wrapped inside SendbirdProvider */}
      <GroupChannel channelUrl={'MY_CHANNEL_URL'} />
    </SendbirdProvider>
  );
};

Context

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

GroupChannelProvider

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

import { GroupChannelProvider } from '@sendbird/uikit-react/GroupChannel/context';

List of properties

The following table lists the properties of GroupChannelProvider.

Properties

Required	Type	Description
channelUrl	string	Specifies the URL of the group channel. You can find this URL from the `url` property of the `GroupChannel`, or find it on your Sendbird Dashboard. (Default: `null`)

Optional	Type	Description
animatedMessageId	number	Specifies the message ID to apply the animation effect. (Default: `null`)
messageListQueryParams	instance	Specifies a MessageCollectionParams and MessageFilterParams to filter messages in the list.
isMessageGroupingEnabled	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`)
isReactionEnabled	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`)
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 `UserMessageCreateParams` 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 `FileMessageCreateParams` before sending it. (Default: `null`)
onBeforeUpdateUserMessage	function	Specifies the prop to execute custom operations before updating a user message. The modified user message is returned through `UserMessageUpdateParams` before updating it. (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`)
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`)
disableMarkAsRead	boolean	Determines whether to turn off the `markAsRead` option when a user enters a group channel. If set to `true`, the read receipt feature is turned off. (Default: `true`)

useGroupChannelContext

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

import { useGroupChannelContext } from '@sendbird/uikit-react/GroupChannel/context';

// Implement your code inside the react function component.
const Component = () => {
  const context = useGroupChannelContext();
  
  const onScrollDownButtonClick = () => {
    context.scrollToBottom();
  };
  
  // ...
}

List of properties

The following table lists the properties of useGroupChannelContext.

Property name	Type	Description
channelUrl	string	Specifies the URL of the group channel. You can find this URL from the `url` property of the `GroupChannel`, or find it on your Sendbird Dashboard. (Default: `null`)
messageListQueryParams	instance	Specifies a MessageCollectionParams and MessageFilterParams to filter messages in the list.
isMessageGroupingEnabled	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`)
isReactionEnabled	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`)
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 `UserMessageCreateParams` 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 `FileMessageCreateParams` before sending it. (Default: `null`)
onBeforeUpdateUserMessage	function	Specifies the prop to execute custom operations before updating a user message. The modified user message is returned through `UserMessageUpdateParams` before updating it. (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`)
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`)
scrollToBottom	function	Specifies the function that scrolls to the bottom of the channel list.
scrollToMessage	function	Specifies the function that locates and scrolls 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.
animatedMessageId	number	Specifies the message ID to apply the animation effect.
setAnimatedMessageId	function	Sets a message ID to trigger the animation effect.
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 `MessageInputWrapper` component.
currentChannel	instance	Specifies the current user's group channel.
messages	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.
loadPrevious	function	Load more previous messages in the list.
loadNext	function	Load more next messages in the list.
hasPrevious	function	Determines whether to retrieve previous messages at the top of the channel.
hasNext	function	Determines whether to retrieve more messages in the channel.
sendUserMessage	function	Sends a user message in the channel.
sendFileMessage	function	Sends a file message in the channel.
sendMultipleFilesMessage	function	Sends a multiple files message in the channel.
sendVoiceMessage	function	Sends a voice message in the channel.
updateUserMessage	function	Updates a user message in the channel.
deleteMessage	function	Delete a message in the channel.
resetWithStartingPoint	function	Resets the message list with a new starting point.

UI components

The UI components in the GroupChannel module are the following: GroupChannelUI, GroupChannelHeader, MessageInputWrapper, MessageList, FileViewer, FrozenNotification, Message, RemoveMessageModal, TypingIndicator, and UnreadCount. They're the default set of UI components that compose the group channel view.

GroupChannelUI

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

import { GroupChannelUI } from '@sendbird/uikit-react/GroupChannel/components/GroupChannelUI';

List of properties

The following table lists the properties of GroupChannelUI.

Property name	Type	Description
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`)
renderCustomSeparator	ReactElement	Renders a customized date separator view in the message list component. (Default: `null`)

GroupChannelHeader

GroupChannelHeader is the header component of the GroupChannelUI 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 GroupChannelHeader.

import { GroupChannelHeader } from '@sendbird/uikit-react/GroupChannel/components/GroupChannelHeader';

MessageInputWrapper

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

import { MessageInputWrapper } from '@sendbird/uikit-react/GroupChannel/components/MessageInputWrapper';

const CustomMessageInput = () => {
  return (
    <MessageInputWrapper
      onSendUserMessage={(userMessageParams) => {
        // Handle the sent message
        console.log('User message sent:', userMessageParams);
      }}
      onSendFileMessage={(fileMessageParams) => {
        // Handle the sent file message
        console.log('File message sent:', fileMessageParams);
      }}
    />
  );
};

List of properties

The following table lists the properties of MessageInputWrapper.

Properties

Optional	Type	Description
value	string	String value to control the input field content.
disabled	boolean	Boolean to disable the input field.
acceptableMimeTypes	string[]	Array of strings specifying acceptable MIME types for file uploads.
renderFileUploadIcon	GroupChannelUIBasicProps['renderFileUploadIcon']	Function to render a custom file upload icon.
renderVoiceMessageIcon	GroupChannelUIBasicProps['renderVoiceMessageIcon']	Function to render a custom voice message icon.
renderSendMessageIcon	GroupChannelUIBasicProps['renderSendMessageIcon']	Function to render a custom send message icon.

VoiceMessageInput

VoiceMessageInput is the component where users can record, stop, play, pause, cancel, and send a voice message recording. See the code below on how to implement VoiceMessageInput.

PlaybackTime

PlaybackTime is the component where users can see the playing time of their voice message recording. The component takes the time value of the recording in milliseconds and shows the playback time in minutes and seconds. See the code below on how to implement PlaybackTime.

ProgressBar

ProgressBar is the component where users can see the progress of the voice message recording playing in real-time. The component takes the value of maxSize and currentSize of the recording in milliseconds and shows the progress bar of the recording. See the code below on how to implement ProgressBar.

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/GroupChannel/components/MessageList';

List of properties

The following table lists the properties of MessageList.

Property name	Type	Description
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`)
renderCustomSeparator	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/GroupChannel/components/Message';

List of properties

The following table lists the properties of Message.

Properties

Required	Type	Description
message	user, admin or file	Specifies the message to be displayed in the message list component of the channel. (Default: `null`)

Optional	Type	Description
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 GroupChannel module. The image and video file types that are supported in Sendbird UIKit are shown in the table below.

Image	Video
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/GroupChannel/components/FileViewer';

List of properties

The following table lists the properties of FileViewer.

Property name	Type	Description
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/GroupChannel/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/GroupChannel/components/RemoveMessageModal';

List of properties

The following table lists the properties of RemoveMessageModal.

Property name	Type	Description
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/GroupChannel/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/GroupChannel/components/UnreadCount';

List of properties

The following table lists the properties of UnreadCount.

Property name	Type	Description
lastReadAt	Date	Specifies the starting date(time) of when the messages are counted as unread. (Default: `null`)
count	number	Specifies the number of the unread messages there are in the channel that the current user is a member of. (Default: `0`)
onClick	function	Specifies the prop to execute custom operations when the count number is clicked. (Default: `null`)

SuggestedMentionList

SuggestedMentionList shows an alphabetical list of all channel members that you can mention in a message. For each member in the list, the profile image, nickname, and user ID are shown by default. This component is displayed right above the message input field. See the code below on how to implement SuggestedMentionList.

import { SuggestedMentionList } from '@sendbird/uikit-react/GroupChannel/components/SuggestedMentionList';

List of properties

The following table lists the properties of SuggestedMentionList.

Property name	Type	Description
targetNickname	string	Specifies the nickname keyword that comes after the mention trigger key in the message input field.
memberListQuery	instance	Specifies a query instance to retrieve a list of users in a channel.
onUserListItemClick	function	Specifies the prop to execute custom operations when a user is selected from the suggested mention list.
onFetchUsers	function	Specifies the prop to execute custom operations when fetching a list of channel members to show on the suggested mention list.
renderUserMentionItem	ReactElement	Renders a customized view of each channel member in the suggested mention list.
ableAddMention	boolean	Determines whether the current user can mention another user in the message.
maxMentionCount	number	Specifies the maximum number of users you can mention in a single message. (Default: `10`)
maxSuggestionCount	number	Specifies the maximum number of users shown in a suggested mention list. (Default: `15`)
inputEvent	KeyboardEvent	Specifies a KeyboardEvent that is generated when a keyboard item has been pressed in the message input field.