Skip to main content

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

NameDescription
reactionListStyleStyling properties and values of the ReactionListStyle component which controls the look of the reaction list.
reactionsRequestBuilderAn instance of ReactionsRequestBuilder which allows you to set various parameters for fetching reactions.
loadingIconURLAsset URL for the loading icon. The default value points to an embedded loading icon.
errorIconURLAsset URL for the error icon. The default value points to an embedded error icon.
avatarStyleStyling properties and values of the AvatarStyle component which controls the look of the avatar.
listItemStyleStyling properties and values of the ListItemStyle component which controls the look of the list item.
reactionItemClickedFunction 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>