Group Chat

Implement group management including create, join, members, roles, and ownership transfer in CometChat React UI Kit.

AI Integration Quick Reference

Field	Value
Package	@cometchat/chat-uikit-react
Key components	CometChatGroups, CometChatGroupMembers, CometChatCreateGroup, CometChatJoinGroup, CometChatAddMembers, CometChatBannedMembers, CometChatTransferOwnership
Init	CometChatUIKit.init(UIKitSettings) then CometChatUIKit.login("UID")
Features	Create public/private/password-protected groups, manage members, roles, ownership transfer
Sample app	GitHub
Related	All Guides

This guide covers the full group lifecycle: creating groups, joining them, managing members, changing roles, and transferring ownership.

Before starting, complete the Getting Started guide for your framework.

---

Components

Component / Class	Role
CometChatCreateGroup	Creates new groups with different types and settings
CometChatJoinGroup	Handles joining public and password-protected groups
CometChatGroupMembers	Displays and manages group member lists
CometChatAddMembers	Adds new members to existing groups
CometChatBannedMembers	Manages banned members and unban operations
CometChatTransferOwnership	Transfers group ownership to other members

---

Integration Steps

1. Create Group

Build a form that collects a group name, type (public/private/password), and optional password. On submit, generate a unique GUID, call CometChat.createGroup(), and emit ccGroupCreated so the rest of the UI updates.

File: CometChatCreateGroup.tsx

export const CometChatCreateGroup = ({ setShowCreateGroup, onGroupCreated }: CreateGroupProps) => {
   const [groupType, setGroupType] = useState("public");
   const [groupName, setGroupName] = useState("");
   const [groupPassword, setGroupPassword] = useState("");

  async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     const GUID = `group_${new Date().getTime()}`;
     const group = new CometChat.Group(GUID, groupName, groupType, groupPassword);

    try {
       const createdGroup = await CometChat.createGroup(group);
       CometChatGroupEvents.ccGroupCreated.next(createdGroup);
       onGroupCreated(createdGroup);
       setShowCreateGroup(false);
     } catch (error) {
       console.error("Group creation failed:", error);
     }
   }
};

---

2. Join Group

Handle joining for both public and password-protected groups. Call CometChat.joinGroup() with the group’s GUID, type, and password (if applicable). On success, emit ccGroupMemberJoined to update the member list across the app.

File: CometChatJoinGroup.tsx

export const CometChatJoinGroup = ({ group, onProtectedGroupJoin }) => {
  const [password, setPassword] = useState("");
  const [error, setError] = useState(false);
  const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();

  const joinGroup = () => {
    CometChat.joinGroup(group.getGuid(), group.getType(), password)
      .then((res) => {
        onProtectedGroupJoin(group);
        CometChatGroupEvents.ccGroupMemberJoined.next({
          joinedGroup: res,
          joinedUser: loggedInUser
        });
      })
      .catch(() => setError(true));
  };
};

---

3. View Group Members

Render the member list for a group using CometChatGroupMembers. Pass onItemClick to handle member selection and options to add context-menu actions like “View Profile”.

File: CometChatHome.tsx

const GroupMembersView = ({ group }: { group: CometChat.Group }) => {
  return (
    <div className="cometchat-group-members">
      <CometChatGroupMembers
        group={group}
        onItemClick={(member) => {
          console.log("Selected member:", member);
        }}
        options={[
          {
            id: "view_profile",
            title: getLocalizedString("view_profile"),
            iconURL: profileIcon,
            onClick: (member) => viewMemberProfile(member)
          }
        ]}
      />
    </div>
  );
};

---

4. Add Members

Let admins select users and add them to the group. Collect selected UIDs, call CometChat.addMembersToGroup(), and emit ccGroupMemberAdded so the member list refreshes.

File: CometChatAddMembers.tsx

export const CometChatAddMembers = ({ group, onBack }: IAddMembersProps) => {
  const [selectedUsers, setSelectedUsers] = useState<CometChat.User[]>([]);
  const [isLoading, setIsLoading] = useState(false);

  const addMembersToGroup = async () => {
    if (selectedUsers.length === 0) return;
    setIsLoading(true);
    try {
      const uids = selectedUsers.map(user => user.getUid());
      await CometChat.addMembersToGroup(uids, group.getGuid(), group.getType() as CometChat.GroupType);
      CometChatGroupEvents.ccGroupMemberAdded.next({
        addedBy: CometChatUIKitLoginListener.getLoggedInUser()!,
        addedMembers: selectedUsers,
        addedIn: group
      });
      onBack();
    } catch (error) {
      console.error("Failed to add members:", error);
    } finally {
      setIsLoading(false);
    }
  };
};

---

5. Ban Members

Fetch the list of banned members using BannedMembersRequestBuilder. This component displays banned users and provides unban functionality for group admins.

File: CometChatBannedMembers.tsx

export const CometChatBannedMembers = ({ group }: bannedMembersProp) => {
  const [bannedMembers, setBannedMembers] = useState<CometChat.User[]>([]);
  const [state, setState] = useState<States>(States.loading);

  useEffect(() => {
    const bannedMembersRequest = new CometChat.BannedMembersRequestBuilder(group.getGuid())
      .setLimit(30)
      .build();

    bannedMembersRequest.fetchNext().then(
      bannedMembers => {
        setBannedMembers(bannedMembers);
        setState(States.loaded);
      }, 
      error => {
        console.log("Banned members fetch failed:", error);
        setState(States.error);
      }
    );
  }, [group]);
};

---

6. Change Member Scope

Promote or demote a member by calling CometChat.updateGroupMemberScope(). Pass the member’s UID, the new scope (admin, moderator, or participant), and the group GUID. Emit ccGroupMemberScopeChanged so the UI reflects the role change.

File: CometChatHome.tsx

const changeMemberScope = async (member: CometChat.GroupMember, newScope: string) => {
  try {
    await CometChat.updateGroupMemberScope(member.getUid(), newScope, group.getGuid());
    const updatedMember = { ...member, scope: newScope };
    CometChatGroupEvents.ccGroupMemberScopeChanged.next({
      changedBy: CometChatUIKitLoginListener.getLoggedInUser()!,
      changedUser: updatedMember,
      changedIn: group,
      newScope: newScope,
      oldScope: member.getScope()
    });
  } catch (error) {
    console.error("Failed to update member scope:", error);
  }
};

---

7. Transfer Ownership

Let the current owner select a member and transfer ownership via CometChat.transferGroupOwnership(). The group object is cloned and updated locally, then ccOwnershipChanged is emitted to sync the UI.

File: CometChatTransferOwnership.tsx

export const CometChatTransferOwnership = ({ group, onClose }: ITransferOwnershipProps) => {
  const [selectedMember, setSelectedMember] = useState<CometChat.GroupMember | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);

  const transferOwnership = async () => {
    if (!selectedMember) return;
    setIsLoading(true);
    setIsError(false);
    try {
      await CometChat.transferGroupOwnership(group.getGuid(), selectedMember.getUid());
      const groupClone = CometChatUIKitUtility.clone(group);
      groupClone.setOwner(selectedMember.getUid());
      CometChatGroupEvents.ccOwnershipChanged.next({
        group: groupClone,
        newOwner: CometChatUIKitUtility.clone(selectedMember)
      });
      onClose();
    } catch (error) {
      setIsError(true);
      console.error("Ownership transfer failed:", error);
    } finally {
      setIsLoading(false);
    }
  };
};

---

Feature Matrix

Feature	Component / Method	File
Create group	CometChatCreateGroup	CometChatCreateGroup.tsx
Join group	CometChatJoinGroup	CometChatJoinGroup.tsx
View members	CometChatGroupMembers	CometChatHome.tsx
Add members	CometChatAddMembers	CometChatAddMembers.tsx
Ban members	CometChatBannedMembers	CometChatBannedMembers.tsx
Change scope	updateGroupMemberScope()	CometChatHome.tsx
Transfer ownership	CometChatTransferOwnership	CometChatTransferOwnership.tsx
Group events	CometChatGroupEvents	Multiple files

---

Next Steps

Groups

Display and manage group lists.

Group Members

Display and manage group member lists.

All Guides

Browse all feature and formatter guides.

Sample App

Full working sample application on GitHub.