Chat UIKit React v3

Chat UIKit React

Chat UIKit

React

Version 3

Open channel

An open channel is a public channel that allows a large number of users to interact with one other and it's displayed using the OpenChannel module. Open channels can accommodate up to 1,000 simultaneous users and don’t require an invitation for users to enter.

Usage

In order to use the OpenChannel module, implement the following code:

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

List of properties

The following table lists the properties of the OpenChannel module.

Properties

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

Optional	Type	Description
children	ReactElement	Specifies the child components of the `OpenChannelProvider`. (Default: `null`)
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`)
queries.messageListParams	instance	Specifies a query instance to retrieve a list of messages in the channel by passing the properties of MessageListParams as a parameter. (Default: `null`)
messageLimit	number	Specifies the maximum number of messages to be stored in the `OpenChannelMessageList` component of the channel. (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`)
onChatHeaderActionClick	function	Specifies the prop to receive callback when the channel title is clicked. (Default: `null`)
renderUserProfile	ReactElement	Renders a customized user profile preview when selecting the user avatar. (Default: `null`)
disableUserProfile	boolean	Determines whether to display the user profile preview when selecting the user avatar. If set to `true`, the user profile preview is not shown. (Default: `true`)

Context

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

OpenChannelProvider

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

import { OpenChannelProvider } from '@sendbird/uikit-react/OpenChannel/context';

List of properties

The following table lists the properties of OpenChannelProvider.

Properties

Required	Type	Description
channelUrl	string	Specifies the URL of the open channel. (Default: `null`)

Optional	Type	Description
children	ReactElement	Specifies the child components of `OpenChannelProvider`. (Default: `null`)
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`)
queries.messageListParams	instance	Specifies a query instance to retrieve a list of messages in the channel by passing the properties of MessageListParams as a parameter. (Default: `null`)
messageLimit	number	Specifies the maximum number of messages to be stored in the `OpenChannelMessageList` component of the channel. (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`)
onChatHeaderActionClick	function	Specifies the prop to receive callback when the channel title is clicked. (Default: `null`)
renderUserProfile	ReactElement	Renders a customized user profile preview when selecting the user avatar. (Default: `null`)
disableUserProfile	boolean	Determines whether to display the user profile preview when selecting the user avatar. If set to `true`, the user profile preview is not shown. (Default: `true`)
renderMessage	ReactElement	Renders a customized message view in the channel. (Default: `null`)
renderHeader	ReactElement	Renders a customized channel header component. (Default: `null`)
renderInput	ReactElement	Renders a customized message input component. (Default: `null`)
renderPlaceholderEmptyList	ReactElement	Renders a customized placeholder for an empty channel status in the message list. (Default: `null`)
renderPlaceHolderError	ReactElement	Renders a customized placeholder for an error status in the channel. (Default: `null`)
renderPlaceholderLoading	ReactElement	Renders a customized placeholder for a message loading status in the channel. (Default: `null`)

useOpenChannelContext

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

import { useOpenChannelContext } from '@sendbird/uikit-react/OpenChannel/context';
// inside an RFC
const openChannelState = useOpenChannelContext();

List of properties

The following table lists the properties of useOpenChannelContext.

Property name	Type	Description
channelUrl	string	Specifies the URL of the open channel. You can find this URL from the `url` property of the `OpenChannel`, or find it on your Sendbird Dashboard. (Default: `null`)
children	ReactElement	Specifies the child components of `OpenChannelProvider`. (Default: `null`)
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`)
queries.messageListParams	instance	Specifies a query instance to retrieve a list of messages in the channel by passing the properties of MessageListParams as a parameter. (Default: `null`)
messageLimit	number	Specifies the maximum number of messages to be stored in the `OpenChannelMessageList` component of the channel. (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`)
onChatHeaderActionClick	function	Specifies the prop to receive callback when the channel title is clicked. (Default: `null`)
renderUserProfile	ReactElement	Renders a customized user profile preview when selecting the user avatar. (Default: `null`)
disableUserProfile	boolean	Determines whether to display the user profile preview when selecting the user avatar. If set to `true`, the user profile preview is not shown. (Default: `true`)
currentOpenChannel	OpenChannel	Specifies the current user's open channel.
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.
isInvalid	boolean	Determines whether the `channelURL` of the current channel is valid. (Default: `false`)
hasMore	boolean	Determines whether the channel has more messages to load in the `OpenChannelMessageList` component.
lastMessageTimestamp	number	Specifies the timestamp of the last message sent in the channel.
frozen	boolean	Determines whether the channel is frozen or not. (Default: `false`)
messageInputRef	React.Ref	Specifies a ref that allows users to enter a message in the `MessageInput` component.
conversationScrollRef	React.Ref	Specifies a ref that allows users to scroll through the `OpenChannelMessageList` component of the open channel.
disabled	boolean	Determines whether to display the message input field of the channel. (Default: `false`)
amIBanned	boolean	Determines whether the current user is banned from the channel or not. (Default: `false`)
amIMuted	boolean	Determines whether the current user is muted in the channel or not. (Default: `false`)
amIOperator	boolean	Determines whether the current user is an operator of the channel. (Default: `false`)

UI components

The UI components in the OpenChannel module are the following: OpenChannelUI, OpenChannelHeader, OpenChannelInput, OpenChannelMessageList, OpenChannelMessage, and FrozenChannelNotification. They're the default set of UI components that compose the open channel view.

OpenChannelUI

OpenChannelUI is the component that displays the basic screen of the module. It contains placeholders for error, loading and empty list statuses and renders the view of header, message, and message list in a channel. The following code shows how to implement OpenChannelUI.

import OpenChannelUI from '@sendbird/uikit-react/OpenChannel/components/OpenChannelUI';

List of properties

The following table lists the properties of OpenChannelUI.

Property name	Type	Description
renderMessage	ReactElement	Renders a customized message view in the channel. (Default: `null`)
renderHeader	ReactElement	Renders a customized channel header component. (Default: `null`)
renderInput	ReactElement	Renders a customized message input component. (Default: `null`)
renderPlaceholderEmptyList	ReactElement	Renders a customized placeholder for an empty channel status in the message list. (Default: `null`)
renderPlaceHolderError	ReactElement	Renders a customized placeholder for an error status in the channel. (Default: `null`)
renderPlaceholderLoading	ReactElement	Renders a customized placeholder for a message loading status in the channel. (Default: `null`)

OpenChannelHeader

OpenChannelHeader is the header component of the OpenChannelUI that displays the channel title and a channel information icon in the top-right corner.

The following code shows how to implement OpenChannelHeader.

import OpenChannelHeader from '@sendbird/uikit-react/OpenChannel/components/OpenChannelHeader';

OpenChannelInput

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

import OpenChannelInput from '@sendbird/uikit-react/OpenChannel/components/OpenChannelInput';

OpenChannelMessageList

The OpenChannelMessageList component shows a list of all messages exchanged in the open 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 OpenChannelMessageList.

import OpenChannelMessageList from '@sendbird/uikit-react/OpenChannel/components/OpenChannelMessageList';

List of properties

The following table lists the properties of OpenChannelMessageList.

Property name	Type	Description
renderMessage	ReactElement	Renders a customized message view in the channel. (Default: `null`)
renderPlaceHolderEmptyList	ReactElement	Renders a customized placeholder for an empty channel status in the message list. (Default: `null`)

OpenChannelMessage

OpenChannelMessage is a component within the OpenChannelMessageList 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 OpenChannelMessage.

import OpenChannelMessage from '@sendbird/uikit-react/OpenChannel/components/OpenChannelMessage';

List of properties

The following table lists the properties of OpenChannelMessage.

Properties

Required	Type	Description
message	object	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`)
editDisabled	boolean	Determines whether to disable the option to edit a message in the channel. (Default: `false`)
renderMessage	ReactElement	Renders a customized message view in the channel. (Default: `null`)

FrozenChannelNotification

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

import FrozenChannelNotification from '@sendbird/uikit-react/OpenChannel/components/FrozenChannelNotification';

On this page

Usage Context

OpenChannelProvider useOpenChannelContext

UI components

OpenChannelUI OpenChannelHeader OpenChannelInput OpenChannelMessageList OpenChannelMessage FrozenChannelNotification

Sample app