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.

Group channel settings

The group channel settings module shows a menu of channel settings that you can make changes to. The menu includes channel name, channel image, list of channel members, and the option to leave the channel. Depending on the user type, moderation features are only available to operators in the group channel.

Channel members

For members of a channel, the channel settings module is displayed as shown in the image below. Channel members can view the member list, invite a user to the channel, and leave the channel.

Operators

For operators, the channel settings module is displayed as shown in the image below. Operators can add and remove additional operators, view the member list, mute and ban channel members, freeze the channel, and leave the channel.


Usage

In order to use the ChannelSettings module, implement the following code:

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

List of properties

The following table lists the properties of the ChannelSettings 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)

queries.applicationUserListQuery

instance

Specifies a query instance to retrieve a filtered list of users to invite to the channel by using ApplicationUserListQuery.

invalidChannel

boolean

Determines whether the channelURL of the current channel is valid. (Default: false)

renderPlaceHolderError

ReactElement

Renders a customized placeholder for an error status in the channel member list. (Default: null)

renderChannelProfile

ReactElement

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

renderModerationPanel

ReactElement

Renders a customized view of the moderation panel that displays the moderation features for channel operators. (Default: null)

renderLeaveChannel

ReactElement

Renders a customized leave channel button in the settings module. (Default: null)


Context

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

ChannelSettingsProvider

ChannelSettingsProvider 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 use ChannelSettingsProvider.

import { ChannelSettingsProvider } from '@sendbird/uikit-react/ChannelSettings/context';

List of properties

The following table lists the properties of ChannelSettingsProvider.

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)

queries.applicationUserListQuery

instance

Specifies a query instance to retrieve a filtered list of users to invite to the channel by using ApplicationUserListQuery.

invalidChannel

boolean

Determines whether the channelURL of the current channel is valid. (Default: false)

useChannelSettings

The useChannelSettings context hook exports the data in the provider to the UI components to create a functional view of the group 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 use useChannelSettings.

import { useChannelSettings } from '@sendbird/uikit-react/ChannelSettings/context';

// Implement your code inside the react function component.
Const channelSettingsState = useChannelSettings();
Const { channel } = channelSettingsState;

List of properties

The following table lists the properties of useChannelSettings.

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)

queries.applicationUserListQuery

instance

Specifies a query instance to retrieve a filtered list of users to invite to the channel by using ApplicationUserListQuery.

invalidChannel

boolean

Determines whether the channelURL of the current channel is valid. (Default: false)


UI components

The UI components in the ChannelSettings module are the following: ChannelSettingsUI, AdminPanel, UserPanel, ChannelProfile, EditDetailsModal, LeaveChannel, and UserListItem. They're the default set of UI components that compose the group channel settings view.

ChannelSettingsUI

ChannelSettingsUI is the component that displays the basic screen of the module. It includes a placeholder for error status and renders channel profile view, moderation menu view, and the leave channel button. The following code shows how to implement ChannelSettingsUI.

import ChannelSettingsUI from '@sendbird/uikit-react/ChannelSettings/components/ChannelSettingsUI';

List of properties

The following table lists the properties of ChannelSettingsUI.

Property nameTypeDescription

renderPlaceHolderError

ReactElement

Renders a customized placeholder for an error status in the channel member list. (Default: null)

renderChannelProfile

ReactElement

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

renderModerationPanel

ReactElement

Renders a customized view of the moderation panel that displays the moderation features for channel operators. (Default: null)

renderLeaveChannel

ReactElement

Renders a customized leave channel button in the settings module. (Default: null)

AdminPanel

The AdminPanel component creates the settings menu view for channel operators. It includes a list of operators, channel members, muted members, banned members, the option to freeze the channel, and the option to leave the channel. The following code shows how to implement AdminPanel.

import AdminPanel from '@sendbird/uikit-react/ChannelSettings/components/AdminPanel';

UserPanel

The UserPanel component creates the settings menu view for channel members. It includes a list of channel members, the option to invite another user to the channel, and the option to leave the channel. The following code shows how to implement UserPanel.

import UserPanel from '@sendbird/uikit-react/ChannelSettings/components/UserPanel';

ChannelProfile

The ChannelProfile component creates the channel profile view. It includes channel title, channel image, and an edit button that allows the user to change channel information. The following code shows how to implement ChannelProfile.

import ChannelProfile from '@sendbird/uikit-react/ChannelSettings/components/ChannelProfile';

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 ChannelProfile component. The following code shows how to implement EditDetailsModal.

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

List of properties

The following table lists the properties of EditDetailsModal.

Property nameTypeDescription

onSubmit

function

Specifies the prop to execute custom operations when the submit button is clicked after editing channel information. (Default: null)

onCancel

function

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

LeaveChannel

The LeaveChannel component is a confirmation modal that appears when the user clicks on the leave channel button in the settings menu. The following code shows how to implement LeaveChannel.

import LeaveChannel from '@sendbird/uikit-react/ChannelSettings/components/LeaveChannel';

List of properties

The following table lists the properties of LeaveChannel.

Property nameTypeDescription

onSubmit

function

Specifies the prop to execute custom operations when the user confirms to leave the channel in the modal. (Default: null)

onCancel

function

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

UserListItem

The UserListItem component shows individual users in a user list. It's used to display each item in a list of channel members, operators, muted members, or banned members in the channel settings module. The component is used in both AdminPanel and UserPanel. The following code shows how to implement UserListItem.

import UserListItem from '@sendbird/uikit-react/ChannelSettings/components/UserListItem';

List of properties

The following table lists the properties of LeaveChannel.

Properties
RequiredTypeDescription

user

Specifies the name of the user to display in the user list.

OptionalTypeDescription

currentUser

string

Specifies the ID of the current user.

className

string

Specifies the custom CSS class name to add to the component.

action

ReactElement

Renders a customized drop-down menu in the user list item view.