- User List View: CometChatContacts presents a comprehensive list of all registered users within the application. This list allows users to quickly find and select specific individuals they wish to interact with.
- Group List View: The component also offers a dedicated view to showcase all the available chat groups. This simplifies the process of joining or creating new group conversations.
- Smart Search Functionality: Users can utilize the powerful search feature to quickly locate specific users or groups by typing names or keywords. This ensures seamless navigation, even in applications with a large user base.
- Selection Mode: CometChatContacts supports a selection mode, enabling users to pick multiple contacts or groups simultaneously. This feature proves useful for creating group chats or forwarding messages to multiple recipients.
- Customizable Tab Layout: Developers can easily customize the appearance of the tabs, including text colors, indicator color, and background, to match the app’s branding and aesthetics.
- Selection Limit Control: Developers have the flexibility to set a selection limit, restricting the number of contacts or groups a user can select during the selection mode. This helps maintain messaging policies and optimize user experience.
- User-Friendly Close Button: The component provides a convenient close button feature, allowing users to exit the Contacts view and return to their previous screen or chat interface effortlessly.
Properties
Title
Heading text for the component| Name | Type | Description |
|---|---|---|
| title | string | Heading text for the component |
Tabs
| Name | Type | Description |
|---|---|---|
| tabs | TabItem[] | List of tabs to be displayed |
| usersTabTitle | string | Heading text for the user list |
| groupsTabTitle | string | Heading text for the group list |
| tabVisibility | TabsVisibility | Sets which tabs needed to be visible or hidden |
Selection
Allows user to choose individual or multiple items.| Name | Type | Description |
|---|---|---|
| selectionMode | SelectionMode | Allows user to select one or more users / groups from the contact list |
| selectionLimit | number | Number of items user can select from the contact list |
Submit
User action to send data to the server| Name | Type | Description |
|---|---|---|
| onSubmitButtonClick | (users?:CometChat.User[], groups?:CometChat.Group[]) => void | Override the method that is invoked when user clicks on the submit button |
| hideSubmitButton | boolean | When set to true, hides the submit button |
| submitButtonText | string | Text appearing on the submit button |
Callback
Functions that can be invoked by the user in response to a specific event or condition.| Name | Type | Description |
|---|---|---|
| onItemClick | (user?:CometChat.User, group?:CometChat.Group) => void | Override the method that is invoked when user clicks on a particular contact |
| onClose | ()=>void | Override the method that is invoked when user clicks on the close icon |
Assets
Custom asset URL used for graphical representation| Name | Type | Description |
|---|---|---|
| closeIconURL | string | Asset URL for the close icon |
Style
Styling properties and values of all the components| Name | Type | Description |
|---|---|---|
| contactsStyle | ContactsStyle | Styling properties and values of the Contacts component |
Configuration
Configurable properties of all the child components| Name | Type | Description |
|---|---|---|
| usersConfiguration | UsersConfiguration | Properties of the users component that are available for customisation via this component. |
| groupsConfiguration | GroupsConfiguration | Properties of the groups component that are available for customisation via this component. |