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>