Skip to main content
The CometChatReactionList component is used to manage and display reactions in messages. It provides functionalities like fetching reactions when a message is updated, updating the reactions, and observing when the user has scrolled to the end of the reaction list.

​
Properties

PropertiesTypeDescription
messageObjectCometChat.BaseMessageThe message for which reactions are being fetched or managed.
reactionListStyleobjectStyling property to customize the appearance of the reactions list component.
avatarStyleobjectStyling property to customize the appearance of the avatar component.
listItemStyleobjectStyling property to customize the appearance of the list item component.
reactionsRequestBuilderCometChat.ReactionsRequestBuilderThe request builder for fetching reactions. If not provided, a new one is created with a default limit.
loadingIconURLstringURL for the loading icon.
errorIconURLstringURL for the error icon.
reactionItemClickedfunctionA function that handles the click event on the reaction list items. It can be used to remove a reaction.

​
Usage

<CometChatReactionList
  messageObject={messageObject}
  reactionListStyle={reactionListStyle}
  reactionsRequestBuilder={reactionsRequestBuilder}
  loadingIconURL={loadingIconURL}
  errorIconURL={errorIconURL}
  avatarStyle={avatarStyle}
  listItemStyle={listItemStyle}
  reactionItemClicked={reactionItemClicked}
/>

​
Styles

​
ReactionListStyle

AttributesTypeDescription
heightstringThe height of the reaction list component.
widthstringThe width of the reaction list component.
borderRadiusstringThe border radius of the reaction list component.
backgroundstringThe background color of the reaction list component.

​
AvatarStyle

AttributesTypeDescription
widthstringThe width of the avatar.
heightstringThe height of the avatar.
borderRadiusstringThe border radius of the avatar.

​
ListItemStyle

AttributesTypeDescription
activeBackgroundstringThe background color when the list item is active.
hoverBackgroundstringThe background color when the list item is hovered over.