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

Group channel settings

Copy link

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


Channel members

Copy link

For members of a group 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

Copy link

For operators, the channel settings module is displayed as shown in the image below. Operators can add and remove other operators and view the list of channel members, muted members, and banned users. They can also mute and ban members, leave the channel, and freeze the channel.


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

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

List of properties

Copy link

The following table lists the properties of the ChannelSettings module.

Properties
RequiredTypeDescription

channelUrl

string

Specifies the URL of the group channel. You can find this URL from the url property of the GroupChannel, 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)

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 tools for channel operators. (Default: null)

renderLeaveChannel

ReactElement

Renders a customized leave channel button in the settings module. (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: ChannelSettingsProvider and useChannelSettingsContext hook. ChannelSettingsProvider is a provider that manages all the logic and data used in the channel settings view. useChannelSettingsContext is a context hook that allows access to the provider's data.

ChannelSettingsProvider

Copy link

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

Copy link

The following table lists the properties of ChannelSettingsProvider.

Properties
RequiredTypeDescription

channelUrl

string

Specifies the URL of the group channel. You can find this URL from the url property of the GroupChannel, 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)

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)

useChannelSettingsContext

Copy link

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

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

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

List of properties

Copy link

The following table lists the properties of useChannelSettingsContext.

Property nameTypeDescription

channelUrl

string

Specifies the URL of the group channel. You can find this URL from the url property of the GroupChannel, 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)

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

Copy link

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

ChannelSettingsUI

Copy link

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

Copy link

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 tools for channel operators. (Default: null)

renderLeaveChannel

ReactElement

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

ModerationPanel

Copy link

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

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

UserPanel

Copy link

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

Copy link

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

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

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

List of properties

Copy link

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

Copy link

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

Copy link

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

Copy link

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 users in the channel settings module. The component is used in both ModerationPanel and UserPanel. The following code shows how to implement UserListItem.

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

List of properties

Copy link

The following table lists the properties of LeaveChannel.

Properties
RequiredTypeDescription

user

string

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.