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:
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 }});
let messagesConfiguration = new MessagesConfiguration({ messageListConfiguration:new MessageListConfiguration({ reactionsConfiguration: new ReactionsConfiguration({ reactionListConfiguration:reactionListConfig }) }) })