Manage Group Members

AI Agent Component Spec

{
  "component": "CometChatGroupMembers",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatGroupMembers } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "description": "Scrollable, searchable list of members in a specific group with roles, scopes, online status, and member management actions.",
  "cssRootClass": ".cometchat-group-members",
  "primaryOutput": {
    "prop": "onItemClick",
    "type": "(groupMember: CometChat.GroupMember) => void"
  },
  "props": {
    "data": {
      "group": { "type": "CometChat.Group", "required": true }
    },
    "callbacks": {
      "onItemClick": "(groupMember: CometChat.GroupMember) => void",
      "onSelect": "(groupMember: CometChat.GroupMember, selected: boolean) => void"
    },
    "visibility": {
      "hideSearch": { "type": "boolean", "default": false },
      "hideKickMemberOption": { "type": "boolean", "default": false },
      "hideBanMemberOption": { "type": "boolean", "default": false },
      "hideScopeChangeOption": { "type": "boolean", "default": false }
    }
  }
}

Overview

The Group Members component displays a searchable list of members in a group with their roles, online status, and management actions (kick, ban, change scope). It’s typically shown alongside the group chat. Time estimate: 15 minutes
Difficulty: Beginner

Prerequisites

React.js integration completed
Groups guide completed

Steps

Step 1: Display group members

Add the component with a group object:

import { useEffect, useState } from "react";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import "@cometchat/chat-uikit-react/css-variables.css";

function GroupMembersDemo() {
  const [group, setGroup] = useState<CometChat.Group>();

  useEffect(() => {
    CometChat.getGroup("GROUP_GUID").then(setGroup);
  }, []);

  return group ? (
    <div style={{ width: 320, height: "100vh" }}>
      <CometChatGroupMembers group={group} />
    </div>
  ) : null;
}

export default GroupMembersDemo;

Step 2: Integrate with group chat

Show members alongside the message view:

import { useEffect, useState } from "react";
import {
  CometChatGroupMembers,
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import "@cometchat/chat-uikit-react/css-variables.css";

function GroupChatWithMembers() {
  const [group, setGroup] = useState<CometChat.Group>();

  useEffect(() => {
    CometChat.getGroup("GROUP_GUID").then(setGroup);
  }, []);

  if (!group) return null;

  return (
    <div style={{ display: "flex", height: "100vh", width: "100vw" }}>
      {/* Members panel */}
      <div style={{ width: 300, height: "100%" }}>
        <CometChatGroupMembers group={group} />
      </div>
      
      {/* Chat panel */}
      <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
        <CometChatMessageHeader group={group} />
        <CometChatMessageList group={group} />
        <CometChatMessageComposer group={group} />
      </div>
    </div>
  );
}

Step 3: Handle member selection

Respond to member clicks and multi-select:

import { useState } from "react";
import {
  CometChatGroupMembers,
  SelectionMode,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function MemberSelection({ group }: { group: CometChat.Group }) {
  const [selected, setSelected] = useState<Set<string>>(new Set());

  return (
    <>
      <CometChatGroupMembers
        group={group}
        selectionMode={SelectionMode.multiple}
        onItemClick={(member: CometChat.GroupMember) => {
          console.log("Clicked:", member.getName());
        }}
        onSelect={(member: CometChat.GroupMember, isSelected: boolean) => {
          setSelected((prev) => {
            const next = new Set(prev);
            const uid = member.getUid();
            isSelected ? next.add(uid) : next.delete(uid);
            return next;
          });
        }}
      />
      <div>Selected: {selected.size} members</div>
    </>
  );
}

Step 4: Filter members

Show only admins and moderators:

import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function AdminMembers({ group }: { group: CometChat.Group }) {
  return (
    <CometChatGroupMembers
      group={group}
      groupMemberRequestBuilder={
        new CometChat.GroupMembersRequestBuilder(group.getGuid())
          .setScopes(["admin", "moderator"])
          .setLimit(20)
      }
    />
  );
}

Step 5: Hide management actions

Create a read-only member list:

import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function ReadOnlyMembers({ group }: { group: CometChat.Group }) {
  return (
    <CometChatGroupMembers
      group={group}
      hideSearch={true}
      hideUserStatus={true}
      hideKickMemberOption={true}
      hideBanMemberOption={true}
      hideScopeChangeOption={true}
    />
  );
}

Step 6: Customize member display

Replace the subtitle with join date:

TypeScript
CSS

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";

function CustomSubtitleMembers({ group }: { group: CometChat.Group }) {
  const getSubtitleView = (member: CometChat.GroupMember) => {
    const date = new Date(member.getJoinedAt() * 1000).toLocaleDateString();
    return <div className="member-subtitle">Joined: {date}</div>;
  };

  return (
    <CometChatGroupMembers 
      group={group} 
      subtitleView={getSubtitleView} 
    />
  );
}

.member-subtitle {
  overflow: hidden;
  color: #727272;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 400 14px Roboto;
}

Step 7: Custom list item

Replace the entire row with a custom design:

TypeScript
CSS

import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatAvatar,
  CometChatGroupMembers,
} from "@cometchat/chat-uikit-react";

function CustomItemViewMembers({ group }: { group: CometChat.Group }) {
  const getItemView = (member: CometChat.GroupMember) => {
    const scope = member.getScope();
    return (
      <div className="member-item">
        <div className="member-item__avatar">
          <CometChatAvatar image={member.getAvatar()} name={member.getName()} />
        </div>
        <div className="member-item__content">
          <div className="member-item__name">{member.getName()}</div>
          <div className={`member-item__scope member-item__scope--${scope}`}>
            {scope}
          </div>
        </div>
      </div>
    );
  };

  return <CometChatGroupMembers group={group} itemView={getItemView} />;
}

.member-item {
  display: flex;
  min-width: 240px;
  padding: 8px 16px;
  align-items: center;
  gap: 12px;
  background: #fff;
}

.member-item__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.member-item__avatar {
  width: 40px;
  height: 40px;
}

.member-item__name {
  color: #141414;
  font: 500 16px Roboto;
}

.member-item__scope {
  padding: 4px 12px;
  border-radius: 1000px;
  background: #edeafa;
  color: #6852d6;
  font: 400 12px Roboto;
}

.member-item__scope--owner {
  background: #6852d6;
  color: #fff;
}

.member-item__scope--admin {
  border: 1px solid #6852d6;
}

.member-item__scope--participant {
  display: none;
}

Complete Example

import { useEffect, useState } from "react";
import {
  CometChatGroupMembers,
  CometChatAvatar,
  SelectionMode,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import "@cometchat/chat-uikit-react/css-variables.css";

function GroupMembersPanel() {
  const [group, setGroup] = useState<CometChat.Group>();
  const [selectedMembers, setSelectedMembers] = useState<CometChat.GroupMember[]>([]);

  useEffect(() => {
    CometChat.getGroup("YOUR_GROUP_GUID").then(setGroup);
  }, []);

  const handleMemberClick = (member: CometChat.GroupMember) => {
    console.log("View profile:", member.getName());
  };

  const handleSelect = (member: CometChat.GroupMember, isSelected: boolean) => {
    setSelectedMembers((prev) =>
      isSelected
        ? [...prev, member]
        : prev.filter((m) => m.getUid() !== member.getUid())
    );
  };

  if (!group) return <div>Loading...</div>;

  return (
    <div style={{ width: 320, height: "100vh" }}>
      <CometChatGroupMembers
        group={group}
        selectionMode={SelectionMode.multiple}
        onItemClick={handleMemberClick}
        onSelect={handleSelect}
        onError={(error) => console.error("Error:", error)}
        onEmpty={() => console.log("No members found")}
        subtitleView={(member) => (
          <span style={{ color: "#666", fontSize: 12 }}>
            Joined {new Date(member.getJoinedAt() * 1000).toLocaleDateString()}
          </span>
        )}
      />
      
      {selectedMembers.length > 0 && (
        <div style={{ padding: 16, borderTop: "1px solid #e8e8e8" }}>
          <button onClick={() => console.log("Action on", selectedMembers.length, "members")}>
            Perform action on {selectedMembers.length} selected
          </button>
        </div>
      )}
    </div>
  );
}

export default GroupMembersPanel;

Advanced: Custom context menu options

Add custom actions to the member options menu:

import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatGroupMembers,
  CometChatOption,
} from "@cometchat/chat-uikit-react";

function CustomOptionsMembers({ group }: { group: CometChat.Group }) {
  return (
    <CometChatGroupMembers
      group={group}
      options={(g: CometChat.Group, member: CometChat.GroupMember) => [
        new CometChatOption({
          id: "message",
          title: "Send Message",
          onClick: () => console.log("Message", member.getName()),
        }),
        new CometChatOption({
          id: "profile",
          title: "View Profile",
          onClick: () => console.log("Profile", member.getUid()),
        }),
      ]}
    />
  );
}

Common Issues

The group prop is required. The component will not render without a valid CometChat.Group object.

Issue	Solution
Members not loading	Verify group GUID and user permissions
Actions not showing	Check logged-in user’s scope (admin/moderator required)
Real-time updates not working	Component auto-subscribes to SDK events - check connection

Overview

Prerequisites

Steps

Step 1: Display group members

Step 2: Integrate with group chat

Step 3: Handle member selection

Step 4: Filter members

Step 5: Hide management actions

Step 6: Customize member display

Step 7: Custom list item

Complete Example

Common Issues

Next Steps

Threaded Messages

Events

Groups

Users

Theming

​Overview

​Prerequisites

​Steps

​Step 1: Display group members

​Step 2: Integrate with group chat

​Step 3: Handle member selection

​Step 4: Filter members

​Step 5: Hide management actions

​Step 6: Customize member display

​Step 7: Custom list item

​Complete Example

​Common Issues

​Next Steps

Threaded Messages

Events

​Related Guides

Groups

Users

Theming

Overview

Prerequisites

Steps

Step 1: Display group members

Step 2: Integrate with group chat

Step 3: Handle member selection

Step 4: Filter members

Step 5: Hide management actions

Step 6: Customize member display

Step 7: Custom list item

Complete Example

Common Issues

Next Steps

Related Guides