Groups with Messages
This component is responsible for listing all the groups created on CometChat. It also allows group members to send text, images, videos, or other media as messages to communicate with one another in real-time.
This component typically includes the following component:
Groups: This component lists all the groups created on CometChat.
Messages: This component displays the conversation between participants in a 1:1 or group chat.
Properties
Group Information
Details associated with the group.
| Name | Type | Description |
|---|---|---|
| group | Group Class | View details of this particular CometChat group |
isMobileView
This refers to the display or presentation of the component specifically optimized for viewing on mobile devices such as smartphones or tablets.
| Name | Type | Description |
|---|---|---|
| isMobileView | boolean | When set to true, the component adapts the layout, design, and functionality to provide an optimal user experience on smaller screens and touch-based interfaces. |
messageText
Temporary text displayed to provide a suggestion to the user to select a particular user / group to chat with.
| Name | Type | Description |
|---|---|---|
| messageText | string | It represents the textual content which will be replaced with the messages component when user clicks on a particular user / group chat. |
Function Callback
Functions that can be invoked by the user in response to a specific event or condition.
| Name | Type | Description |
|---|---|---|
| onError | (error: CometChat.CometChatException) => void | null | Override the method that is invoked when an error is encountered within the component |
Configurations
Properties of the child components like conversations and messages that are available for customisation.
| Name | Type | Description |
|---|---|---|
| groupsConfiguration | GroupsConfiguration | Properties of the groups component that are available for customisation via this component. |
| messagesConfiguration | MessagesConfiguration | Properties of the messages component that are available for customisation via this component. |
| createGroupConfiguration | CreateGroupConfiguration | Properties of the create group component that are available for customisation via this component. |
| joinGroupConfiguration | JoinGroupConfiguration | Properties of the join group component that are available for customisation via this component. |
Style
Styling properties of all the involved components
| Name | Type | Description |
|---|---|---|
| groupsWithMessagesStyle | WithMessagesStyle | Styling properties of the component |
Usage
//creating groups configuration
const groupsConfiguration:GroupsConfiguration = new GroupsConfiguration({
hideSeparator:true,
hideSearch:false,
privateGroupIcon:"",
protectedGroupIcon:""
});
//applying groups configuration to groupswithmessages component
<CometChatGroupsWithMessages :GroupsConfiguration="groupsConfiguration"></CometChatGroupsWithMessages>