Group channel settings

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.

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.

To view the image in full screen, click on the

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.

To view the image in full screen, click on the

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

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

The following table lists the properties of the ChannelSettings module.

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 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';

The following table lists the properties of ChannelSettingsProvider.

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;

The following table lists the properties of useChannelSettingsContext.

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 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';

The following table lists the properties of ChannelSettingsUI.

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';

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';

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';

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';

The following table lists the properties of EditDetailsModal.

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';

The following table lists the properties of LeaveChannel.

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';

The following table lists the properties of LeaveChannel.