Chat UIKit React v3
Chat UIKit React
Chat UIKit
React
Version 3

Open channel settings

Copy link

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

Copy link

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.


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

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

List of properties

Copy link

The following table lists the properties of the OpenChannelSettings module.

Properties
RequiredTypeDescription

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)

OptionalTypeDescription

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

Copy link

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

Copy link

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

Copy link

The following table lists the properties of OpenChannelSettingsProvider.

Properties
RequiredTypeDescription

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)

OptionalTypeDescription

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

Copy link

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

Copy link

The following table lists the properties of useOpenChannelSettingsContext.

Property nameTypeDescription

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

Copy link

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

Copy link

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

Copy link

The following table lists the properties of OpenChannelSettingsUI.

Property nameTypeDescription

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

Copy link

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

Copy link

The following table lists the properties of OperatorUI.

Property nameTypeDescription

renderChannelProfile

ReactElement

Renders a customized channel profile view in the settings module. (Default: null)

ParticipantUI

Copy link

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

Copy link

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

Copy link

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

Copy link

The following table lists a property of EditDetailsModal.

Property nameTypeDescription

onCancel

function

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