Skip to main content
UI Components are building blocks of the UI Kit. UI Components are a set of custom classes specially designed to build a rich chat app. There are different UI Components available in the UI Kit Library.

​
CometChatUI

CometChatUI is an option to launch a fully functional chat application using the UI Kit. In CometChatUI all the UI Components are interlinked and work together to launch a fully functional chat on your website/application.
  • React
import { CometChatUI } from "./cometchat-pro-react-ui-kit/CometChatWorkspace/src";

class App extends React.Component {
  
  render() {
    
     return (
       <div style={{width: '800px', height:'800px' }}>
        <CometChatUI chatWithGroup="cometchat-guid-1" />
       </div>
    );
  }
  
}
It takes the following properties:
ParameterDescriptionType
chatWithUserThe ID of the user you want to chat withOptional
chatWithGroupThe ID of the group you want to chat withOptional
friendsOnlyValue could be true or false This property when set to true will return only the friends of the logged-in user in the users tab.Optional
friendsOnly prop is deprecated from version v3.0.0-beta5-1. Please use userListMode variable
Customize UI Kit

​
CometChatUserListWithMessages

The CometChatUserListWithMessages is a component with a list of users. The component has all the necessary listeners and methods required to display the user’s list and shows the set of the messages/chats of the selected user.
  • React
import { CometChatUserListWithMessages } from "./cometchat-pro-react-ui-kit/CometChatWorkspace/src";

class App extends React.Component {
  
  render() {
    
     return (
       <div style={{width: '800px', height:'800px' }}>
        <CometChatUserListWithMessages chatWithUser="cometchat-uid-5" />
       </div>
    );
  }
  
}
It takes the following properties:
ParameterDescriptionType
chatWithUserThe ID of the user you want to chat withOptional
friendsOnlyValue could be true or false This property when set to true will return only the friends of the logged-in user.Optional
friendsOnly prop is deprecated from version v3.0.0-beta5-1. Please use userListMode variable of UIKitSettings class for displaying only friends in the user list.
Please refer to this link for documentation: Customize UI Kit

​
CometChatGroupListWithMessages

The CometChatGroupListWithMessages is a component with a list of groups. The component has all the necessary listeners and methods required to display the group’s list and shows the set of the messages/chats of the selected group.
  • React
import { CometChatGroupListWithMessages } from "./cometchat-pro-react-ui-kit/CometChatWorkspace/src";

class App extends React.Component {
  
  render() {
    
     return (
       <div style={{width: '800px', height:'800px' }}>
        <CometChatGroupListWithMessages chatWithGroup="cometchat-guid-1" />
       </div>
    );
  }
  
}
It takes the following properties:
ParameterDescriptionType
chatWithGroupThe ID of the group you want to chat withOptional

​
CometChatConversationListWithMessages

The CometChatConversationListWithMessages is a component with a list of recent conversations. The component has all the necessary listeners and methods required to display the recent conversation list and shows the set of the messages/chats of the selected recent conversation
  • React
import { CometChatConversationListWithMessages } from "./cometchat-pro-react-ui-kit/CometChatWorkspace/src";

class App extends React.Component {
  
  render() {
    
     return (
       <div style={{width: '800px', height:'800px' }}>
        <CometChatConversationListWithMessages  />
       </div>
    );
  }
  
}
It takes the following properties:
ParameterDescriptionType
chatWithUserThe ID of the user you want to chat withOptional
chatWithGroupThe ID of the group you want to chat withOptional

​
CometChatMessages

The CometChatMessages is a component that displays the list of messages for a particular user or group.
  • React
import { CometChatMessages } from "./cometchat-pro-react-ui-kit/CometChatWorkspace/src";

class App extends React.Component {
  
  render() {
    
     return (
       <div style={{width: '800px', height:'800px' }}>
        <CometChatMessages chatWithGroup="cometchat-guid-1" />
       </div>
    );
  }
  
}
It takes the following properties:
ParameterDescriptionType
chatWithUserThe ID of the user you want to chat withRequired
chatWithGroupThe ID of the group you want to chat withOptional

​
CometChatUserList

The CometChatUserList is a component that displays the list of users available to chat. You can use this component within your app if you wish to display the list of users.
  • React
import { CometChatUserList } from "./cometchat-pro-react-ui-kit/CometChatWorkspace/src";

class App extends React.Component {
  
  render() {
    
     return (
       <div style={{width: '800px', height:'800px' }}>
        <CometChatUserList friendsOnly={true} />
       </div>
    );
  }
  
}
It takes the following props:
ParameterDescriptionType
friendsOnlyValue could be true or false. This property when set to true will return only the friends of the logged-in user.Optional
friendsOnly prop is deprecated from version v3.0.0-beta5-1. Please use userListMode variable of UIKitSettings class for displaying only friends in the user list. Please refer to this link for documentation: Customize UI Kit

​
CometChatGroupList

The CometChatGroupList is a component that displays the list of groups available. You can use this component within your app if you wish to display the list of groups.
  • React
import { CometChatGroupList } from "./cometchat-pro-react-ui-kit/CometChatWorkspace/src";

class App extends React.Component {
  
  render() {
    
     return (
       <div style={{width: '800px', height:'800px' }}>
        <CometChatGroupList />
       </div>
    );
  }
  
}

​
CometChatConversationList

You can use the CometChatConversationList component to display the list of recent conversations that the logged-in user was a part of.
  • React
import { CometChatConversationList } from "./cometchat-pro-react-ui-kit/CometChatWorkspace/src";

class App extends React.Component {
  
  render() {
    
     return (
       <div style={{width: '800px', height:'800px' }}>
        <CometChatConversationList />
       </div>
    );
  }
  
}