Group Members
This component lists all the users who have been added or invited to participate in a particular group and have access to its discussions, shared content, and collaboration features.
Group members can engage in real-time messaging, voice calls, video calls, and other communication activities within the context of the group. They can send messages, share files, initiate or join calls, and interact with other group members based on the permissions and settings defined by the group administrator or owner.
Here are some key points related to group members:
- Group Ownership: A group typically has an administrator or owner who has the authority to manage the group, invite or remove members, and configure group settings.
- Member Roles and Permissions: Group members may have different roles or permissions within the group, such as participant, moderator, and admin. These roles can determine the level of access and the actions a member can perform within the group.
- Participation and Engagement: Group members actively participate in discussions, share information, collaborate on projects, or engage in any relevant activities within the group.
- Member Management: Group administrators, moderators or owners can add or invite new members to the group, remove existing members, or modify member roles as needed.
- Member Notifications: Group members receive notifications about new messages, or other group activities to stay updated and engaged.
Properties
Group Information
Group details associated with the group members.
| Name | Type | Description |
|---|---|---|
| group | Group Class | Add members to this particular CometChat group |
Title
Heading text for the component
| Name | Type | Description |
|---|---|---|
| title | string | Heading text for the component |
| titleAlignment | string | Alignment of the heading text for the component |
Search
This involves keywords, phrases, or criteria into the search bar and retrieving relevant results based on the search query.
| Name | Type | Description |
|---|---|---|
| searchPlaceholder | string | Sample text that appears in the search input as a prompt or suggestion |
| searchIconURL | string | Asset URL for the search icon. |
| hideSearch | boolean | When set to true, hides the search input. |
Loading state
This refers to the state of the groups component when it is actively retrieving or fetching data.
| Name | Type | Description |
|---|---|---|
| loadingIconURL | string | Asset URL for the loading indicator icon |
| loadingStateView | view | User-defined component to customise the loading indicator |
Empty state
This refers to the state of the groups component when it has no content or data to display
| Name | Type | Description |
|---|---|---|
| emptyStateText | string | The textual content displayed in the empty state of the component. |
| emptyStateView | view | User-defined component to customise the empty state of the component. |
Error state
This refers to the state of the groups component when an error occurs during the retrieval of the data.
| Name | Type | Description |
|---|---|---|
| errorStateText | string | The textual content displayed in the error state of the component. |
| errorStateView | view | User-defined component to customise the error state of the component. |
RequestBuilder
This provides set of methods that allow developers to easily create and configure group members before fetching them for the intended recipients.
| Name | Type | Description |
|---|---|---|
| searchRequestBuilder | CometChat.GroupMembersRequestBuilder | Class that allows you to set various parameters to the GroupMembersRequestBuilder class based on which the group members are searched |
| groupMembersRequestBuilder | CometChat.GroupMembersRequestBuilder | Class that allows you to set various parameters to the GroupMembersRequestBuilder class based on which the group members are fetched |
Toggle
Switch to hide or show the separators, and error message.
| Name | Type | Description |
|---|---|---|
| hideError | boolean | When set to true, hides the error messages displayed within the component |
| hideSeparator | boolean | When set to true, hides the separator between the individual elements in the list. |
| disableUsersPresence | boolean | When set to true, Users will not be able to see whether a particular user is currently online or offline. |
selectionMode
Allows user to choose individual or multiple items.
| Name | Type | Description |
|---|---|---|
| selectionMode | SelectionMode | Allows user to select individual or multiple items for applying specific operations. |
| onSelect | Function as PropType<(groupMember: CometChat.GroupMember[])=>void> | Method invoked which returns the selected group members. |
Custom view
UI component created and customised by the developer to meet your design or functional requirements.
| Name | Type | Description |
|---|---|---|
| subtitleView | Function as PropType<(groupMember: CometChat.GroupMember) => ViewType> | User-defined component to customise the secondary text shown in the group member profile. |
| tailView | Function as PropType<(groupMember: CometChat.GroupMember) => ViewType> | User-defined component to customise the trailing view of the group member profile. |
Menu
UI component created and customised by the developer to meet your design or functional requirements representing the button actions in the header section.
| Name | Type | Description |
|---|---|---|
| menu | view | User-defined component to showcase options related to the group members in the header section. |
Actions
This includes action buttons or icons that allow users to perform common actions or tasks, such as muting the notification etc.
| Name | Type | Description |
|---|---|---|
| options | Function as PropType<(group: CometChat.Group, groupMember: CometChat.GroupMember) => CometChatOption[]> | User-defined actions which appears for each group member on mouseover. |
Function Callback
Functions that can be invoked by the user in response to a specific event or condition.
| Name | Type | Description |
|---|---|---|
| onBack | Function as PropType<()=>void> | Override the method that is invoked when the user clicks on the back button. |
| onError | Function as PropType<(error: CometChat.CometChatException) => void> | Override the method that is invoked when an error is encountered within the component |
Back button
This allows users to navigate to the previous screen or page they were viewing.
| Name | Type | Description |
|---|---|---|
| backButtonIconURL | string | Asset URL for the back button icon |
| showBackButton | boolean | When set to true, displays the back button |
Style
Styling properties and values of the groups component
| Name | Type | Description |
|---|---|---|
| avatarStyle | AvatarStyle | Styling properties and values of the Avatar component |
| statusIndicatorStyle | StatusIndicator | Styling properties and values of the StatusIndicator component |
| listItemStyle | ListItemStyle | Styling properties and values of the ListItem component |
| groupMembersStyle | GroupMembersStyle | Styling properties and values of the GroupMembers component |
Usage
- Javascript
const GUID = "GUID";
const groupName = "Hello Group!";
const groupType = CometChatConstants.groupType.public;
const password = "";
const group = new CometChat.Group(GUID, groupName, groupType, password);
//custom request builder
const requestBuilder:CometChat.GroupMemberRequestBuilder = new CometChat.GroupMemberRequestBuilder()
.setLimit(30)
.setSearchKeyword("abc")
.build();
//pass group object to fetch its group members
<CometChatGroupMembers :group="group" :groupMemberRequestBuilder="requestBuilder">
</CometChatGroupMembers>