> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Group Chat

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

<Accordion title="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](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)                                                                                         |
  | Related        | [All Guides](/ui-kit/react/guide-overview)                                                                                                                              |
</Accordion>

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

Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) 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](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCreateGroup/CometChatCreateGroup.tsx)*

```tsx lines theme={null}
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](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatJoinGroup/CometChatJoinGroup.tsx)*

```tsx lines theme={null}
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](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx lines theme={null}
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](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatAddMembers/CometChatAddMembers.tsx)*

```tsx lines theme={null}
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](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatBannedMembers/CometChatBannedMembers.tsx)*

```tsx lines theme={null}
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](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx lines theme={null}
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](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatTransferOwnership/CometChatTransferOwnership.tsx)*

```tsx lines theme={null}
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](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCreateGroup/CometChatCreateGroup.tsx)                   |
| Join group         | `CometChatJoinGroup`         | [CometChatJoinGroup.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatJoinGroup/CometChatJoinGroup.tsx)                         |
| View members       | `CometChatGroupMembers`      | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)                                        |
| Add members        | `CometChatAddMembers`        | [CometChatAddMembers.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatAddMembers/CometChatAddMembers.tsx)                      |
| Ban members        | `CometChatBannedMembers`     | [CometChatBannedMembers.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatBannedMembers/CometChatBannedMembers.tsx)             |
| Change scope       | `updateGroupMemberScope()`   | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)                                        |
| Transfer ownership | `CometChatTransferOwnership` | [CometChatTransferOwnership.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatTransferOwnership/CometChatTransferOwnership.tsx) |
| Group events       | `CometChatGroupEvents`       | Multiple files                                                                                                                                                                   |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Groups" href="/ui-kit/react/groups">
    Display and manage group lists.
  </Card>

  <Card title="Group Members" href="/ui-kit/react/group-members">
    Display and manage group member lists.
  </Card>

  <Card title="All Guides" href="/ui-kit/react/guide-overview">
    Browse all feature and formatter guides.
  </Card>

  <Card title="Sample App" href="https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app">
    Full working sample application on GitHub.
  </Card>
</CardGroup>