Skip to main content
FieldValue
Package@cometchat/chat-uikit-react
Key componentsCometChatGroups, CometChatGroupMembers, CometChatCreateGroup, CometChatJoinGroup, CometChatAddMembers, CometChatBannedMembers, CometChatTransferOwnership
InitCometChatUIKit.init(UIKitSettings) then CometChatUIKit.login("UID")
FeaturesCreate public/private/password-protected groups, manage members, roles, ownership transfer
Sample appGitHub
RelatedAll 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 / ClassRole
CometChatCreateGroupCreates new groups with different types and settings
CometChatJoinGroupHandles joining public and password-protected groups
CometChatGroupMembersDisplays and manages group member lists
CometChatAddMembersAdds new members to existing groups
CometChatBannedMembersManages banned members and unban operations
CometChatTransferOwnershipTransfers 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

FeatureComponent / MethodFile
Create groupCometChatCreateGroupCometChatCreateGroup.tsx
Join groupCometChatJoinGroupCometChatJoinGroup.tsx
View membersCometChatGroupMembersCometChatHome.tsx
Add membersCometChatAddMembersCometChatAddMembers.tsx
Ban membersCometChatBannedMembersCometChatBannedMembers.tsx
Change scopeupdateGroupMemberScope()CometChatHome.tsx
Transfer ownershipCometChatTransferOwnershipCometChatTransferOwnership.tsx
Group eventsCometChatGroupEventsMultiple 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.