Contacts

1. 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.
2. 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.
3. 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.
4. 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.
5. 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.
6. 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.
7. 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

import {
    CometChatContacts,
  } from "@cometchat/chat-uikit-react";

  function ContactsDemo() {
    return (
         <CometChatContacts
         title="CometChat Contacts"
         />
    );
  }
  
  export default ContactsDemo;

​

Properties

​

ContactsStyle

 const contactsStyle = new ContactsStyle({
    width: "100vw",
    height: "100vh",
    border: "1px solid #ccc",
    borderRadius: "8px",
    background: "#f0f0f0",
    titleTextFont: "14px Arial, sans-serif",
    titleTextColor: "#333",
    closeIconTint: "blue", 
});