This component allows administrators or group owners to add new members to a specific group. It enables administrators or group owners to extend the membership of a group by adding new users to participate in the group’s discussions and activities. By utilising this feature, administrators can manage group membership, and control access to group content. The administrator can select the desired users to be added to the group. This can be done by searching for specific users, selecting from a list of available users. The selected users will receive notifications to join the group.

​
Properties

​
Group Information

Details associated with the group.
NameTypeDescription
groupGroup ClassAdd members of this particular CometChat group

​
Title

Heading text for the component
NameTypeDescription
titlestringHeading text for the component
titleAlignmentstringAlignment of the heading text for the component
This involves keywords, phrases, or criteria into the search bar and retrieving relevant results based on the search query.
NameTypeDescription
searchPlaceholderstringSample text that appears in the search input as a prompt or suggestion
searchIconURLstringAsset URL for the search icon.
hideSearchbooleanWhen set to true, hides the search input.

​
Section Header

Label or title of a specific section for the component
NameTypeDescription
sectionHeaderKeystringMethod of the user class to display the section header
showSectionHeaderbooleanWhen set to true, displays the header between the individual sections in the list.

​
Loading state

This refers to the state of the groups component when it is actively retrieving or fetching data.
NameTypeDescription
loadingIconURLstringAsset URL for the loading indicator icon
loadingStateViewviewUser-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
NameTypeDescription
emptyStateTextstringThe textual content displayed in the empty state of the component.
emptyStateViewviewUser-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.
NameTypeDescription
errorStateTextstringThe textual content displayed in the error state of the component.
errorStateViewviewUser-defined component to customise the error state of the component.

​
RequestBuilder

This provides set of methods that allow developers to easily create and configure users before fetching them for the intended recipients.
NameTypeDescription
searchRequestBuilderCometChat.UsersRequestBuilderClass that allows you to set various parameters to the UsersRequest class based on which the users are searched
usersRequestBuilderCometChat.UsersRequestBuilderClass that allows you to set various parameters to the UsersRequest class based on which the users are fetched

​
Toggle

Switch to hide or show the separators, and error message.
NameTypeDescription
hideErrorbooleanWhen set to true, hides the error messages displayed within the component
hideSeparatorbooleanWhen set to true, hides the separator between the individual elements in the list.
disableUsersPresencebooleanWhen 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.
NameTypeDescription
selectionModeSelectionModeAllows user to select individual or multiple items for applying specific operations.
onSelectFunction as PropType<(users:CometChat.User[]) => void>Method invoked which returns the selected users.

​
Custom view

UI component created and customised by the developer to meet your design or functional requirements.
NameTypeDescription
subtitleViewFunction as PropType<(user: CometChat.User) => ViewType>User-defined component to customise the secondary text shown in the default user profile.
UI component created and customised by the developer to meet your design or functional requirements representing the button actions in the header section.
NameTypeDescription
menuviewUser-defined component to showcase options related to the group 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.
NameTypeDescription
optionsFunction as PropType<(user:CometChat.User) => CometChatOption[]>User-defined actions which appears for each group on mouseover.

​
Function Callback

Functions that can be invoked by the user in response to a specific event or condition.
NameTypeDescription
onBackFunction as PropType<() => void>Override the method that is invoked when the user clicks on the back button.
onErrorFunction as PropType<(error: CometChat.CometChatException) => void>Override the method that is invoked when an error is encountered within the component

​
Misc

NameTypeDescription
backButtonIconURLstringAsset URL for the back button icon
buttonTextstringText displayed on the add members submit button
onAddMembersButtonClick(guid:string, members:CometChat.User[]) => voidOverride the method that is invoked when the user clicks on the add members submit button

​
Style

Styling properties and values of all the involved components
NameTypeDescription
avatarStyleAvatarStyleStyling properties and values of the Avatar component
statusIndicatorStyleStatusIndicatorStyling properties and values of the StatusIndicator component
listItemStyleListItemStyleStyling properties and values of the ListItem component
addMembersStyleAddMembersStyleStyling properties and values of the AddMembers component

​
Events

To handle events supported by CometChatAddMembers component you have to add the listeners mentioned here. 
onBeforeMount(() => {

  CometChatGroupEvents.ccGroupMemberAdded.subscribe(({
messages: CometChat.Action[],usersAdded: CometChat.User[],userAddedIn:group,userAddedBy:user
}) => {
  //Proceed with UI updates
  });

});

onBeforeUnmount(() => {

  CometChatGroupEvents.ccGroupMemberAdded.unsubscribe();

});

​
Usage

//custom style properties
const addMembersStyle:AddMembersStyle =  new AddMembersStyle({
background:"",
border:"",
titleTextFont:"",
titleTextColor:"",
emptyStateTextFont:"",
emptyStateTextColor:"",
})

//apply custom styling to the CometChatAddMembers component
<CometChatAddMembers :addMembersStyle="addMembersStyle"></CometChatAddMembers>