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

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
RequiredTypeDescription

channelUrl

string

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

OptionalTypeDescription

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
RequiredTypeDescription

channelUrl

string

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

OptionalTypeDescription

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 nameTypeDescription

channelUrl

string

Specifies the URL of the open channel. (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 nameTypeDescription

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 nameTypeDescription

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
RequiredTypeDescription

message

object

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)

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)