Group Members

Scrollable, searchable list of members in a specific group with roles, scopes, online status, and member management actions.

AI Integration Quick Reference

{
  "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,
        "note": "The group whose members are displayed"
      },
      "groupMemberRequestBuilder": {
        "type": "CometChat.GroupMembersRequestBuilder",
        "default": "SDK default (30 per page)",
        "note": "Pass the builder, not the result of .build()"
      },
      "searchRequestBuilder": {
        "type": "CometChat.GroupMembersRequestBuilder",
        "default": "undefined"
      },
      "searchKeyword": {
        "type": "string",
        "default": "\"\""
      }
    },
    "callbacks": {
      "onItemClick": "(groupMember: CometChat.GroupMember) => void",
      "onSelect": "(groupMember: CometChat.GroupMember, selected: boolean) => void",
      "onEmpty": "() => void",
      "onError": "((error: CometChat.CometChatException) => void) | null"
    },
    "visibility": {
      "hideSearch": { "type": "boolean", "default": false },
      "hideError": { "type": "boolean", "default": false },
      "hideKickMemberOption": { "type": "boolean", "default": false },
      "hideBanMemberOption": { "type": "boolean", "default": false },
      "hideScopeChangeOption": { "type": "boolean", "default": false },
      "hideUserStatus": { "type": "boolean", "default": false },
      "disableLoadingState": { "type": "boolean", "default": false },
      "showScrollbar": { "type": "boolean", "default": false }
    },
    "selection": {
      "selectionMode": {
        "type": "SelectionMode",
        "values": ["SelectionMode.single (0)", "SelectionMode.multiple (1)", "SelectionMode.none (2)"],
        "default": "SelectionMode.none"
      }
    },
    "viewSlots": {
      "itemView": "(groupMember: CometChat.GroupMember) => JSX.Element",
      "leadingView": "(groupMember: CometChat.GroupMember) => JSX.Element",
      "titleView": "(groupMember: CometChat.GroupMember) => JSX.Element",
      "subtitleView": "(groupMember: CometChat.GroupMember) => JSX.Element",
      "trailingView": "(groupMember: CometChat.GroupMember) => JSX.Element",
      "headerView": "JSX.Element",
      "loadingView": "JSX.Element",
      "emptyView": "JSX.Element",
      "errorView": "JSX.Element",
      "options": "(group: CometChat.Group, groupMember: CometChat.GroupMember) => CometChatOption[]"
    }
  },
  "events": [
    {
      "name": "CometChatGroupEvents.ccGroupMemberKicked",
      "payload": "IGroupMemberKickedBanned",
      "description": "Member kicked"
    },
    {
      "name": "CometChatGroupEvents.ccGroupMemberBanned",
      "payload": "IGroupMemberKickedBanned",
      "description": "Member banned"
    },
    {
      "name": "CometChatGroupEvents.ccGroupMemberScopeChanged",
      "payload": "IGroupMemberScopeChanged",
      "description": "Member scope changed"
    },
    {
      "name": "CometChatGroupEvents.ccGroupMemberAdded",
      "payload": "IGroupMemberAdded",
      "description": "Members added"
    }
  ],
  "sdkListeners": [
    "onGroupMemberScopeChanged",
    "onGroupMemberKicked",
    "onGroupMemberBanned",
    "onMemberAddedToGroup",
    "onGroupMemberLeft",
    "onGroupMemberJoined",
    "onUserOnline",
    "onUserOffline"
  ],
  "types": {
    "CometChatOption": {
      "id": "string | undefined",
      "title": "string | undefined",
      "iconURL": "string | undefined",
      "onClick": "(() => void) | undefined"
    },
    "SelectionMode": {
      "single": 0,
      "multiple": 1,
      "none": 2
    }
  }
}

Where It Fits

CometChatGroupMembers is a panel component that renders the member list for a specific group. It requires a group prop and provides built-in member management actions (kick, ban, scope change) based on the logged-in user’s role. Typically rendered alongside the message view in a group chat layout.

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" }}>
      <div style={{ width: 300, height: "100%" }}>
        <CometChatGroupMembers group={group} />
      </div>
      <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
        <CometChatMessageHeader group={group} />
        <CometChatMessageList group={group} />
        <CometChatMessageComposer group={group} />
      </div>
    </div>
  );
}

---

Minimal Render

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: "100%", height: "100%" }}>
      <CometChatGroupMembers group={group} />
    </div>
  ) : null;
}

export default GroupMembersDemo;

Root CSS class: .cometchat-group-members

---

Filtering Group Members

Pass a CometChat.GroupMembersRequestBuilder to groupMemberRequestBuilder. Pass the builder instance — not the result of .build().

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

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

Filter Recipes

Recipe	Code
Limit to 10 per page	new CometChat.GroupMembersRequestBuilder("GUID").setLimit(10)
Search by keyword	new CometChat.GroupMembersRequestBuilder("GUID").setSearchKeyword("john")
Admins and moderators only	new CometChat.GroupMembersRequestBuilder("GUID").setScopes(["admin", "moderator"])

Default page size is 30. The component uses infinite scroll — the next page loads as the user scrolls to the bottom.

The searchRequestBuilder prop accepts a separate GroupMembersRequestBuilder for filtering when the search bar is active.

Refer to GroupMembersRequestBuilder for the full builder API.

---

Actions and Events

Callback Props

onItemClick

Fires when a member row is tapped.

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

function GroupMembersWithClick({ group }: { group: CometChat.Group }) {
  return (
    <CometChatGroupMembers
      group={group}
      onItemClick={(member: CometChat.GroupMember) => {
        console.log("Selected member:", member.getName());
      }}
    />
  );
}

onSelect

Fires when a member is checked/unchecked in multi-select mode. Requires selectionMode to be set.

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

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

  return (
    <CometChatGroupMembers
      group={group}
      selectionMode={SelectionMode.multiple}
      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;
        });
      }}
    />
  );
}

onEmpty

Fires when the member list has no data to display.

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

function GroupMembersWithEmpty({ group }: { group: CometChat.Group }) {
  return (
    <CometChatGroupMembers
      group={group}
      onEmpty={() => console.log("No members found")}
    />
  );
}

onError

Fires on internal errors (network failure, auth issue, SDK exception).

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

function GroupMembersWithError({ group }: { group: CometChat.Group }) {
  return (
    <CometChatGroupMembers
      group={group}
      onError={(error: CometChat.CometChatException) => {
        console.error("CometChatGroupMembers error:", error);
      }}
    />
  );
}

Global UI Events

CometChatGroupEvents emits events subscribable from anywhere in the application. The component both emits and subscribes to these events.

Events emitted by this component:

Event	Fires when	Payload
ccGroupMemberKicked	A member is kicked	IGroupMemberKickedBanned
ccGroupMemberBanned	A member is banned	IGroupMemberKickedBanned
ccGroupMemberScopeChanged	A member’s scope changes	IGroupMemberScopeChanged

Events subscribed internally:

Event	Internal behavior
ccGroupMemberKicked	Removes the kicked member from the list
ccGroupMemberBanned	Removes the banned member from the list
ccGroupMemberScopeChanged	Updates the member’s scope in the list
ccGroupMemberAdded	Appends newly added members to the list

import { useEffect } from "react";
import { CometChatGroupEvents } from "@cometchat/chat-uikit-react";

function useGroupMemberEvents() {
  useEffect(() => {
    const kickedSub = CometChatGroupEvents.ccGroupMemberKicked.subscribe(
      (item) => {
        console.log("Member kicked:", item.kickedUser.getName());
      }
    );
    const scopeSub = CometChatGroupEvents.ccGroupMemberScopeChanged.subscribe(
      (item) => {
        console.log("Scope changed:", item.updatedUser.getName(), "to", item.scopeChangedTo);
      }
    );

    return () => {
      kickedSub?.unsubscribe();
      scopeSub?.unsubscribe();
    };
  }, []);
}

SDK Events (Real-Time, Automatic)

The component listens to these SDK events internally. No manual attachment needed unless additional side effects are required.

SDK Listener	Internal behavior
onGroupMemberScopeChanged	Updates the member’s scope in the list
onGroupMemberKicked	Removes the kicked member from the list
onGroupMemberBanned	Removes the banned member from the list
onMemberAddedToGroup	Appends the new member to the list
onGroupMemberLeft	Removes the member who left from the list
onGroupMemberJoined	Appends the joined member to the list
onUserOnline / onUserOffline	Updates the member’s online/offline status (disabled when hideUserStatus={true})

In React 18 StrictMode, useEffect runs twice on mount in development. The component handles listener cleanup internally, but any additional listeners added alongside the component need cleanup in the useEffect return function to avoid duplicate event handling.

---

Custom View Slots

Each slot replaces a section of the default UI. Slots that accept a member parameter receive the CometChat.GroupMember object for that row.

Slot	Signature	Replaces
itemView	(groupMember: CometChat.GroupMember) => JSX.Element	Entire list item row
leadingView	(groupMember: CometChat.GroupMember) => JSX.Element	Avatar / left section
titleView	(groupMember: CometChat.GroupMember) => JSX.Element	Name / title text
subtitleView	(groupMember: CometChat.GroupMember) => JSX.Element	Subtitle text
trailingView	(groupMember: CometChat.GroupMember) => JSX.Element	Right section (scope badge / actions)
headerView	JSX.Element	Entire header bar
loadingView	JSX.Element	Loading spinner
emptyView	JSX.Element	Empty state
errorView	JSX.Element	Error state
options	(group: CometChat.Group, groupMember: CometChat.GroupMember) => CometChatOption[]	Context menu / hover actions

itemView

Replace the entire list item row.

Default:

Customized:

TypeScript

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="group-member-list-item">
        <div className="group-member-list-item__avatar">
          <CometChatAvatar image={member.getAvatar()} name={member.getName()} />
        </div>
        <div className="group-member-list-item__content">
          <div className="group-member-list-item__content-name">{member.getName()}</div>
          <div className={`group-member-list-item__content-tag group-member-list-item__content-tag-${scope}`}>
            {scope}
          </div>
        </div>
      </div>
    );
  };

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

CSS

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

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

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

.group-member-list-item__content-name {
  overflow: hidden;
  color: #141414;
  text-overflow: ellipsis;
  font: 500 16px Roboto;
}

.group-member-list-item__content-tag {
  display: flex;
  padding: 4px 12px;
  border-radius: 1000px;
  background: #edeafa;
  color: #6852d6;
  font: 400 12px Roboto;
}

.group-member-list-item__content-tag-owner {
  background: #6852d6;
  color: #fff;
}

.group-member-list-item__content-tag-admin {
  border: 1px solid #6852d6;
}

.group-member-list-item__content-tag-participant {
  display: none;
}

subtitleView

Replace the subtitle text. Joined date example.

Default:

Customized:

TypeScript

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

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

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

CSS

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

trailingView

Replace the right section. Scope tag example.

Default:

Customized:

TypeScript

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

function TrailingViewMembers({ group }: { group: CometChat.Group }) {
  const getTrailingView = (member: CometChat.GroupMember) => {
    return (
      <div className="group-member-scope-tag">
        {member.getScope()}
      </div>
    );
  };

  return <CometChatGroupMembers group={group} trailingView={getTrailingView} />;
}

CSS

.group-member-scope-tag {
  display: flex;
  padding: 4px 12px;
  border-radius: 1000px;
  background: #edeafa;
  color: #6852d6;
  font: 400 12px Roboto;
}

headerView

Replace the entire header bar.

TypeScript

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

function CustomHeaderMembers({ group }: { group: CometChat.Group }) {
  return (
    <CometChatGroupMembers
      group={group}
      headerView={
        <div className="group-members__header">
          <div className="group-members__header__title">
            {getLocalizedString("GROUP_MEMBERS")}
          </div>
          <CometChatButton onClick={() => { /* handle click */ }} />
        </div>
      }
    />
  );
}

CSS

.group-members__header {
  display: flex;
  width: 100%;
  padding: 8px 16px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 10px;
  border: 1px solid #e8e8e8;
  background: #edeafa;
}

.group-members__header__title {
  overflow: hidden;
  color: #141414;
  text-overflow: ellipsis;
  font: 700 24px Roboto;
}

options

Replace the context menu / hover actions on each member item. The options callback receives both the group and the member.

TypeScript

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: "kick",
          title: "Kick User",
          onClick: () => { /* kick logic */ },
        }),
      ]}
    />
  );
}

CSS

.cometchat-group-members .cometchat-menu-list__main-menu-item-icon {
  background: #f44649;
}

.cometchat-group-members .cometchat-menu-list__menu {
  background: transparent;
  box-shadow: none;
}

---

Common Patterns

Hide member management actions

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

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

Admins and moderators only

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"])
      }
    />
  );
}

Minimal chrome

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

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

---

CSS Architecture

The component uses CSS custom properties (design tokens) defined in @cometchat/chat-uikit-react/css-variables.css. The cascade:

1. Global tokens (e.g., --cometchat-primary-color, --cometchat-background-color-01) are set on the .cometchat root wrapper.
2. Component CSS (.cometchat-group-members) consumes these tokens via var() with fallback values.
3. Overrides target .cometchat-group-members descendant selectors in a global stylesheet.

Key Selectors

Target	Selector
Root	.cometchat-group-members
Header title	.cometchat-group-members .cometchat-list__header-title
List item	.cometchat-group-members .cometchat-list-item
Body title	.cometchat-group-members .cometchat-list-item__body-title
Trailing view	.cometchat-group-members .cometchat-list-item__trailing-view
Scope badge	.cometchat-group-members__trailing-view-options
Admin scope badge	.cometchat-group-members__trailing-view-options-admin
Owner scope badge	.cometchat-group-members__trailing-view-options-owner
Participant scope badge	.cometchat-group-members__trailing-view-options-participant
Online status	.cometchat-group-members__list-item-online .cometchat-list-item__status
Scope change dropdown	.cometchat-group-members .cometchat-menu-list__sub-menu
Empty state	.cometchat-group-members__empty-state-view
Error state	.cometchat-group-members__error-state-view
Shimmer loading	.cometchat-group-members__shimmer
Backdrop (modal)	.cometchat-group-members__backdrop

Example: Brand-themed group members

.cometchat-group-members .cometchat-list__header-title {
  background: #feede1;
  color: #f76808;
  font-family: "Times New Roman";
}

.cometchat-group-members .cometchat-list-item__body-title {
  font-family: "Times New Roman";
}

.cometchat-group-members .cometchat-group-members__trailing-view-options {
  font-family: "Times New Roman";
}

Customization Matrix

What to change	Where	Property/API	Example
Override behavior on user interaction	Component props	on<Event> callbacks	onItemClick={(m) => openProfile(m)}
Filter which members appear	Component props	groupMemberRequestBuilder	groupMemberRequestBuilder={new CometChat.GroupMembersRequestBuilder("GUID").setScopes(["admin"])}
Toggle visibility of UI elements	Component props	hide<Feature> boolean props	hideKickMemberOption={true}
Replace a section of the list item	Component props	<slot>View render props	subtitleView={(m) => <div>{m.getScope()}</div>}
Change colors, fonts, spacing	Global CSS	Target .cometchat-group-members class	.cometchat-group-members .cometchat-avatar { border-radius: 8px; }

---

Props

All props are optional unless noted otherwise.

---

disableLoadingState

Skips the loading spinner when re-fetching.

Type	boolean
Default	false

---

emptyView

Custom component displayed when there are no members.

Type	JSX.Element
Default	Built-in empty state

---

errorView

Custom component displayed when an error occurs.

Type	JSX.Element
Default	Built-in error state

Hidden when hideError={true}.

---

group

The group whose members are fetched and displayed. Required.

Type	CometChat.Group
Default	—

---

groupMemberRequestBuilder

Controls which members load and in what order.

Type	CometChat.GroupMembersRequestBuilder
Default	SDK default (30 per page)

Pass the builder instance, not the result of .build().

---

headerView

Custom component rendered as the entire header bar.

Type	JSX.Element
Default	Built-in header with title

---

hideBanMemberOption

Hides the option to ban a member from the group.

Type	boolean
Default	false

---

hideError

Hides the default and custom error views.

Type	boolean
Default	false

---

hideKickMemberOption

Hides the option to kick a member from the group.

Type	boolean
Default	false

---

hideScopeChangeOption

Hides the option to change the scope of a group member.

Type	boolean
Default	false

---

hideSearch

Hides the default search bar.

Type	boolean
Default	false

---

hideUserStatus

Hides the user’s online/offline status indicator.

Type	boolean
Default	false

---

itemView

Custom renderer for the entire list item row.

Type	(groupMember: CometChat.GroupMember) => JSX.Element
Default	Built-in list item

---

leadingView

Custom renderer for the avatar / left section.

Type	(groupMember: CometChat.GroupMember) => JSX.Element
Default	Built-in avatar

---

loadingView

Custom component displayed during the loading state.

Type	JSX.Element
Default	Built-in shimmer

---

onEmpty

Callback fired when the member list is empty.

Type	() => void
Default	undefined

---

onError

Callback fired when the component encounters an error.

Type	((error: CometChat.CometChatException) => void) | null
Default	undefined

---

onItemClick

Callback fired when a member row is clicked.

Type	(groupMember: CometChat.GroupMember) => void
Default	undefined

---

onSelect

Callback fired when a member is selected/deselected. Requires selectionMode to be set.

Type	(groupMember: CometChat.GroupMember, selected: boolean) => void
Default	undefined

---

options

Custom context menu / hover actions for each member item.

Type	(group: CometChat.Group, groupMember: CometChat.GroupMember) => CometChatOption[]
Default	undefined

---

searchKeyword

Pre-fills the search and filters the member list.

Type	string
Default	""

---

searchRequestBuilder

Controls filtering when the search bar is active.

Type	CometChat.GroupMembersRequestBuilder
Default	undefined

---

selectionMode

Enables single or multi-select checkboxes on list items.

Type	SelectionMode
Default	SelectionMode.none

enum SelectionMode {
  single,    // 0
  multiple,  // 1
  none,      // 2
}

---

showScrollbar

Shows the scrollbar in the member list.

Type	boolean
Default	false

---

subtitleView

Custom renderer for the subtitle text.

Type	(groupMember: CometChat.GroupMember) => JSX.Element
Default	Built-in subtitle

---

titleView

Custom renderer for the name / title text.

Type	(groupMember: CometChat.GroupMember) => JSX.Element
Default	Built-in title

---

trailingView

Custom renderer for the right section (scope badge / actions).

Type	(groupMember: CometChat.GroupMember) => JSX.Element
Default	Built-in trailing view

---

Events

Event	Payload	Fires when
CometChatGroupEvents.ccGroupMemberKicked	IGroupMemberKickedBanned	Member kicked
CometChatGroupEvents.ccGroupMemberBanned	IGroupMemberKickedBanned	Member banned
CometChatGroupEvents.ccGroupMemberScopeChanged	IGroupMemberScopeChanged	Member scope changed
CometChatGroupEvents.ccGroupMemberAdded	IGroupMemberAdded	Members added

All events are RxJS Subject instances. Subscribe with .subscribe(), unsubscribe with the returned subscription’s .unsubscribe().

---

CSS Selectors

Target	Selector
Root	.cometchat-group-members
Header title	.cometchat-group-members .cometchat-list__header-title
List item	.cometchat-group-members .cometchat-list-item
Body title	.cometchat-group-members .cometchat-list-item__body-title
Trailing view	.cometchat-group-members .cometchat-list-item__trailing-view
Scope badge	.cometchat-group-members__trailing-view-options
Admin scope badge	.cometchat-group-members__trailing-view-options-admin
Owner scope badge	.cometchat-group-members__trailing-view-options-owner
Participant scope badge	.cometchat-group-members__trailing-view-options-participant
Online status	.cometchat-group-members__list-item-online .cometchat-list-item__status
Scope change dropdown	.cometchat-group-members .cometchat-menu-list__sub-menu
Scope change list	.cometchat-group-members .cometchat-menu-list__sub-menu-list
Empty state	.cometchat-group-members__empty-state-view
Empty state title	.cometchat-group-members__empty-state-view-body-title
Error state	.cometchat-group-members__error-state-view
Error state title	.cometchat-group-members__error-state-view-body-title
Shimmer loading	.cometchat-group-members__shimmer
Backdrop	.cometchat-group-members__backdrop