Contacts
CometChatContacts is a versatile UI component specifically designed to facilitate the display and management of users and groups within chat applications. It streamlines the process of showcasing all app users and available chat groups in a user-friendly interface, making it easier for users to connect and communicate effectively.
Key Features:
- 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.
How to integrate CometChatContacts ?
CometChatContacts
is a component. CometChatContacts
includes various attributes and methods to customize its UI.
- Typescript
<CometChatContacts
hideSubmit={true}
onItemPress={({ user, group }) => {}}
{...startConversationConfiguration}
onClose={() => {}}
/>
Properties
Properties | Type | Description |
---|---|---|
usersConfiguration | UsersConfiguration | used as a custom request for user request builder protocol |
onItemPress | (param: { user?:User, group?:Group }) | callback triggered on tapping a user or group item tab |
groupsConfiguration | GroupsConfiguration | used as a custom request for group request builder protocol |
backIcon | Image | used to set the back icon |
contactsStyle | ContactsStyleInterface | used to set the contact styles |
onClose | Function | used to set the close icon function when the tapped on close icon |
selectionMode | SelectionMode | used to set the number of groups that can be selected if activateSelection is not null. SelectionMode can be single, multiple . |
submitIcon | Image | used to set submit button icon |
title | String | used to set title |
userTabTitle | String | used to set users tab title |
groupTabTitle | String | used to set groups tab title |
onSubmitIconClick | (props: { users: Array<User>, groups: Array<Group> }) | triggered when clicked on submit icon |
tabVisibility | 'user' | 'groups' | 'usersAndGroup' | parameter to alter visibility of different tabs between users and group |
selectionLimit | number | used to set the selection limit |
hideSubmit | boolean | used to hide submit icons |
contactStyle
Properties | Type | Description |
---|---|---|
width | string | number | used to set width |
height | string | number | used to set height |
background | String | used to set background color |
border | BorderStyle | used to set border |
borderRadius | number | used to set corner radius |
titleTextFont | FontStyle | used to set title font |
titleTextColor | String | used to set a text color |
backIconTint | String | used to set a back icon tint |
tabWidth | string | number | used to set a tab width |
tabHeight | string | number | used to set a tab height |
tabBorder | BorderStyle | used to set a tab border |
tabBorderRadius | Number | used to set tab border radius |
tabBackgroundColor | String | used to set tab background color |
tabTitleTextFont | FontStyle | used to set tab title text font |
tabTitleTextColor | String | used to set tab title text color |
activeTabTitleTextColor | String | used to set active tab title text color |
activeTabBackgroundColor | String | used to set active tab background color |
activeTabBorder | BorderStyle | used to set active tab border |
selectionIconTint | String | used to set selected icon color |
How to integrate ContactStyles ?
- Typescript
// create a MediaRecorderStyle object
const contactsStyle = new ContactsStyleInterface({
titleTextColor = "rgb(51, 153, 255)",
tabHeight = 40
});
// pass that MediaRecorderStyle object to CometChatMediaRecorder
<CometChatContacts
...
contactsStyle={contactsStyle}
...
/>