Chat UIKit React v3

Chat UIKit React

Chat UIKit

React

Version 3

Open channel settings

The open channel settings module shows a menu of channel setting options that you can make changes to. It includes channel name, channel image, application URL, list of channel participants, and the option to delete the channel. Depending on the user type, moderation tools are only available to channel operators.

Operators

Only operators can view the open channel settings module as shown in the image below. Operators can add and remove operators, view the list of channel participants, muted participants, and banned users. They can also mute and ban participants, and delete the channel.

Usage

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

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

List of properties

The following table lists the properties of the OpenChannelSettings 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
onCloseClick	function	Specifies the prop to execute custom operations when the close button in the top-right corner is clicked. (Default: `null`)
onLeaveChannel	function	Specifies the prop to execute custom operations when the user leaves the current channel.
onChannelModified	function	Specifies the prop to receive callback when the channel setting is modified. (Default: `null`)
onBeforeUpdateChannel	function	Specifies the prop to execute custom operations before updating a channel. (Default: `null`)
onDeleteChannel	function	Specifies the prop to receive callback when the channel is deleted. (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`)
renderUserProfile	ReactElement	Renders a customized user profile preview when selecting the user avatar. (Default: `null`)
renderOperatorUI	ReactElement	Renders a customized view of the channel settings for operators. (Default: `null`)
renderParticipantList	ReactElement	Renders a customized view of the channel settings for non-operator participants. (Default: `null`)

Context

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

OpenChannelSettingsProvider

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

import { OpenChannelSettingsProvider } from '@sendbird/uikit-react/OpenChannelSettings/context';

List of properties

The following table lists the properties of OpenChannelSettingsProvider.

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
onCloseClick	function	Specifies the prop to execute custom operations when the close button in the top-right corner is clicked. (Default: `null`)
onLeaveChannel	function	Specifies the prop to execute custom operations when the user leaves the current channel.
onChannelModified	function	Specifies the prop to receive callback when the channel setting is modified. (Default: `null`)
onBeforeUpdateChannel	function	Specifies the prop to execute custom operations before updating a channel. (Default: `null`)
onDeleteChannel	function	Specifies the prop to receive callback when the channel is deleted. (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`)
renderUserProfile	ReactElement	Renders a customized user profile preview when selecting the user avatar. (Default: `null`)

useOpenChannelSettingsContext

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

import { useOpenChannelSettingsContext } from '@sendbird/uikit-react/OpenChannelSettings/context';

List of properties

The following table lists the properties of useOpenChannelSettingsContext.

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`)
onCloseClick	function	Specifies the prop to execute custom operations when the close button in the top-right corner is clicked. (Default: `null`)
onChannelModified	function	Specifies the prop to receive callback when the channel setting is modified. (Default: `null`)
onBeforeUpdateChannel	function	Specifies the prop to execute custom operations before updating a channel. (Default: `null`)
onDeleteChannel	function	Specifies the prop to receive callback when the channel is deleted. (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`)
renderUserProfile	ReactElement	Renders a customized user profile preview when selecting the user avatar. (Default: `null`)
setChannel	Method	Specifies a callback method to update the open channel settings UI.

UI components

The UI components in the OpenChannelSettings module are the following: OpenChannelSettingsUI, OperatorUI, ParticipantUI, OpenChannelProfile, and EditDetailsModal. These are the default set of UI components that compose the open channel settings view.

OpenChannelSettingsUI

OpenChannelSettingsUI is the component that displays the basic screen of the module. It renders the OperatorUI component for channel operators and the ParticipantUI for non-operator, participants of the channel. The following code shows how to implement OpenChannelSettingsUI.

import OpenChannelSettingsUI from '@sendbird/uikit-react/OpenChannelSettings/components/OpenChannelSettingsUI';

List of properties

The following table lists the properties of OpenChannelSettingsUI.

Property name	Type	Description
renderOperatorUI	ReactElement	Renders a customized view of the channel settings for operators. (Default: `null`)
renderParticipantList	ReactElement	Renders a customized view of the participant list for non-operator participants. (Default: `null`)

OperatorUI

The OperatorUI component creates the settings menu view for channel operators. It includes a list of operators, channel participants, muted participants, banned users, and the option to change channel profile and delete the channel. The following code shows how to implement OperatorUI.

import OperatorUI from '@sendbird/uikit-react/OpenChannelSettings/components/OperatorUI';

List of properties

The following table lists the properties of OperatorUI.

Property name	Type	Description
renderChannelProfile	ReactElement	Renders a customized channel profile view in the settings module. (Default: `null`)

ParticipantUI

The ParticipantUI component displays a list of all participants in the open channel. The following code shows how to implement ParticipantUI.

import ParticipantUI from '@sendbird/uikit-react/OpenChannelSettings/components/ParticipantUI';

OpenChannelProfile

The OpenChannelProfile component creates a channel profile view, which includes channel title and channel image. The following code shows how to implement OpenChannelProfile.

import OpenChannelProfile from '@sendbird/uikit-react/OpenChannelSettings/components/OpenChannelProfile';

EditDetailsModal

The EditDetailsModal component displays a modal where the user can edit channel name and profile image. This modal appears when the user clicks on the edit button in the OpenChannelProfile component. The following code shows how to implement EditDetailsModal.

import EditDetailsModal from '@sendbird/uikit-react/OpenChannelSettings/components/EditDetailsModal';

List of properties

The following table lists a property of EditDetailsModal.

Property name	Type	Description
onCancel	function	Specifies the prop to execute custom operations when the cancel button is clicked. (Default: `null`)

On this page

Operators Usage Context

OpenChannelSettingsProvider useOpenChannelSettingsContext

UI components

OpenChannelSettingsUI OperatorUI ParticipantUI OpenChannelProfile EditDetailsModal

Sample app