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

Open channel settings

The open channel settings module shows a menu of channel settings 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. Only the operators of the channel can configure channel settings for open channels.


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 group 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 members. (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 useOpenChannelSettings hook. OpenChannelSettingsProvider is a provider that manages all the logic and data used in the channel settings view. useOpenChannelSettings 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, useOpenChannelSettings} 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 group 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)

useOpenChannelSettings

The useOpenChannelSettings 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 useOpenChannelSettings.

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

List of properties

The following table lists the properties of useOpenChannelSettings.

Property nameTypeDescription

channelUrl

string

Specifies the URL of the group 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, OpenChannelProfile, OperatorUI, ParticipantUI, 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 members. (Default: null)

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 ChannelProfile from '@sendbird/uikit-react/ChannelSettings/components/ChannelProfile';

OperatorUI

The OperatorUI component displays a channel settings view for only operators of the channel. The following code shows how to implement OperatorUI.

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

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 channel settings view for participants of the channel. The following code shows how to implement ParticipantUI.

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

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 OpenChannelSettingsUI from '@sendbird/uikit-react/OpenChannelSettings/components/OpenChannelSettingsUI';

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)