ReactionListConfiguration
You can modify the Reaction List component's properties using the ReactionListConfiguration object. To use a configuration, you simply need to pass it to respective parameter.
The ReactionListConfiguration supports the following properties:
Configurable Properties
Name | Description |
---|---|
reactionListStyle | Styling properties and values of the ReactionListStyle component which controls the look of the reaction list. |
reactionsRequestBuilder | An instance of ReactionsRequestBuilder which allows you to set various parameters for fetching reactions. |
loadingIconURL | Asset URL for the loading icon. The default value points to an embedded loading icon. |
errorIconURL | Asset URL for the error icon. The default value points to an embedded error icon. |
avatarStyle | Styling properties and values of the AvatarStyle component which controls the look of the avatar. |
listItemStyle | Styling properties and values of the ListItemStyle component which controls the look of the list item. |
reactionItemClicked | Function to be called when a reaction item is clicked. It provides the reaction and message as parameters. |
You can create an instance of ReactionListConfiguration
and pass it as a property to customize these attributes.
const reactionListConfig = new ReactionListConfiguration({
reactionListStyle: new ReactionListStyle({}),
reactionsRequestBuilder: new CometChat.ReactionsRequestBuilder(),
loadingIconURL: 'url_to_your_custom_loading_icon',
errorIconURL: 'url_to_your_custom_error_icon',
avatarStyle: new AvatarStyle(),
listItemStyle: new ListItemStyle(),
reactionItemClicked: (reaction, message) => {
// Write your custom function here
}
});
Usage
let messagesConfiguration = new MessagesConfiguration({
messageListConfiguration:new MessageListConfiguration({
reactionsConfiguration: new ReactionsConfiguration({
reactionListConfiguration:reactionListConfig
})
})
})
<cometchat-conversations-with-messages [messagesConfiguration]="messagesConfiguration"></cometchat-conversations-with-messages>