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 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
RequiredTypeDescription

channelUrl

string

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

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
RequiredTypeDescription

channelUrl

string

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

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 nameTypeDescription

channelUrl

string

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

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 nameTypeDescription

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 nameTypeDescription

onCancel

function

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