Group Members - CometChat Docs

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,
        "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
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="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} />;
}

.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
CSS

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} />;
}

.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
CSS

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} />;
}

.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
CSS

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

.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
CSS

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

.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:

Global tokens (e.g., --cometchat-primary-color, --cometchat-background-color-01) are set on the .cometchat root wrapper.
Component CSS (.cometchat-group-members) consumes these tokens via var() with fallback values.
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; }`

Accessibility

The component renders a scrollable list of interactive items. Each member row is keyboard-focusable and activates on Enter/Space. The scope change dropdown and context menu (options) are accessible via keyboard. Online status indicators use CSS — add aria-label attributes via itemView if screen reader descriptions are needed.

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`

​Where It Fits

​Minimal Render

​Filtering Group Members

​Filter Recipes

​Actions and Events

​Callback Props

​onItemClick

​onSelect

​onEmpty

​onError

​Global UI Events

​SDK Events (Real-Time, Automatic)

​Custom View Slots

​itemView

​subtitleView

​trailingView

​headerView

​options

​Common Patterns

​Hide member management actions

​Admins and moderators only

​Minimal chrome

​CSS Architecture

​Key Selectors

​Example: Brand-themed group members

​Customization Matrix

​Accessibility

​Props

​disableLoadingState

​emptyView

​errorView

​group

​groupMemberRequestBuilder

​headerView

​hideBanMemberOption

​hideError

​hideKickMemberOption

​hideScopeChangeOption

​hideSearch

​hideUserStatus

​itemView

​leadingView

​loadingView

​onEmpty

​onError

​onItemClick

​onSelect

​options

​searchKeyword

​searchRequestBuilder

​selectionMode

​showScrollbar

​subtitleView

​titleView

​trailingView

​Events

​CSS Selectors

Where It Fits

Minimal Render

Filtering Group Members

Filter Recipes

Actions and Events

Callback Props

onItemClick

onSelect

onEmpty

onError

Global UI Events

SDK Events (Real-Time, Automatic)

Custom View Slots

itemView

subtitleView

trailingView

headerView

options

Common Patterns

Hide member management actions

Admins and moderators only

Minimal chrome

CSS Architecture

Key Selectors

Example: Brand-themed group members

Customization Matrix

Accessibility

Props

disableLoadingState

emptyView

errorView

group

groupMemberRequestBuilder

headerView

hideBanMemberOption

hideError

hideKickMemberOption

hideScopeChangeOption

hideSearch

hideUserStatus

itemView

leadingView

loadingView

onEmpty

onError

onItemClick

onSelect

options

searchKeyword

searchRequestBuilder

selectionMode

showScrollbar

subtitleView

titleView

trailingView

Events

CSS Selectors