Reactions - CometChat Docs

Enhance user engagement in your chat application with message reactions. Users can express their emotions using reactions to messages. This feature allows users to add or remove reactions, and to fetch all reactions on a message. You can also listen to reaction events in real-time. Let’s see how to work with reactions in CometChat’s SDK.

Add a Reaction

Call addReaction() with a message ID and an emoji string.

TypeScript
JavaScript

let messageId:string = "1";
let emoji:string = "😊";

CometChat.addReaction(messageId, emoji)
.then((res:CometChat.BaseMessage) => {
console.log('response', res);
}).catch((err:CometChat.CometChatException) => {
console.log('err', err);
})

let messageId = "1";
let emoji = "😊";

CometChat.addReaction(messageId, emoji)
.then((res) => {
  console.log('response', res);
}).catch(err => {
  console.log('err', err);
})

Remove a Reaction

Call removeReaction() with the same message ID and emoji.

TypeScript
JavaScript

let messageId:string = "1";
let emoji:string = "😊";

CometChat.removeReaction(messageId, emoji)
.then((res:CometChat.BaseMessage) => {
console.log('response', res);
}).catch((err:CometChat.CometChatException) => {
console.log('err', err);
})

let messageId = "1";
let emoji = "😊";

CometChat.removeReaction(messageId, emoji)
.then((res) => {
  console.log('response', res);
}).catch(err => {
  console.log('err', err);
})

Both addReaction() and removeReaction() return a BaseMessage object with the updated reactions.

Read Reaction Data from a Message

Any BaseMessage exposes reaction data through two methods:

Get All Reactions

Use getReactions() to retrieve the list of reactions on a message. Returns an array of ReactionCount objects, or an empty array if no one has reacted.

TypeScript
JavaScript

message.getReactions()

message.getReactions()

Check if the Logged-in User Has Reacted

Call getReactedByMe() on any ReactionCount object to check whether the logged-in user has reacted with that particular emoji. Returns true if they have, false otherwise.

TypeScript
JavaScript

let reactions = message.getReactions();
reactions.forEach((reaction) => {
reaction.getReactedByMe(); //Return true is logged-in user reacted on that message, otherwise false
})   

let reactions = message.getReactions();
reactions.forEach((reaction) => {
reaction.getReactedByMe(); //Return true is logged-in user reacted on that message, otherwise false
}) 

Fetch Reactions for a Message

To get the full list of who reacted with what on a specific message, use ReactionRequestBuilder. You can paginate through results with fetchNext() and fetchPrevious() (max 100 per request).

Builder Method	Description
`setMessageId(value)`	The message ID to fetch reactions for. Required.
`setReaction(value)`	Filter to a specific emoji (e.g., `"😊"`). When set, only reactions matching this emoji are returned.
`setLimit(value)`	Number of reactions to fetch per request. Max 100.

Fetch Next

TypeScript
JavaScript

let limit:number = 10;
let messageId:number = 1;

let reactionRequest = new CometChat.ReactionRequestBuilder()
.setMessageId(messageId)
.setLimit(limit)
.build();

reactionRequest.fetchNext().then(
(reactions: CometChat.Reaction[]) => {
console.log("list fetched:", reactions);
},
(error: CometChat.CometChatException) => {
console.log('list fetching failed with error:', error);
},
);

let limit = 10;
let messageId = 1;

let reactionRequest = new CometChat.ReactionRequestBuilder()
.setMessageId(messageId)
.setLimit(limit)
.build();

reactionRequest.fetchNext().then(
 (reactions) => {
 console.log("list fetched:", reactions);
 },
 (error) => {
 console.log('list fetching failed with error:', error);
 },
 );

The fetchNext() method returns an array of Reaction objects representing individual user reactions on the message. Fetch Previous The fetchPrevious() method fetches the previous set of reactions for the message.

TypeScript
JavaScript

let limit = 10;
let messageId = 1;

let reactionRequest = new CometChat.ReactionRequestBuilder()
.setMessageId(messageId)
.setLimit(limit)
.build();

reactionRequest.fetchNext().then(
messages => {
console.log("list fetched:", messages);
},
error => {
console.log('list fetching failed with error:', error);
},
);

let limit = 10;
let messageId = 1;

let reactionRequest = new CometChat.ReactionRequestBuilder()
.setMessageId(messageId)
.setLimit(limit)
.build();

reactionRequest.fetchNext().then(
    messages => {
      console.log("list fetched:", messages);
    },
    error => {
      console.log('list fetching failed with error:', error);
    },
  );

Fetch Previous

TypeScript
JavaScript

let limit:number = 10;
let messageId:number = 1;

let reactionRequest = new CometChat.ReactionRequestBuilder()
.setMessageId(messageId)
.setLimit(limit)
.build();

reactionRequest.fetchPrevious().then(
(reactions: CometChat.Reaction[]) => {
console.log("list fetched:", reactions);
},
(error: CometChat.CometChatException) => {
console.log('list fetching failed with error:', error);
},
);

let limit = 10;
let messageId = 1;

let reactionRequest = new CometChat.ReactionRequestBuilder()
.setMessageId(messageId)
.setLimit(limit)
.build();

reactionRequest.fetchPrevious().then(
    messages => {
      console.log("list fetched:", messages);
    },
    error => {
      console.log('list fetching failed with error:', error);
    },
  );

Real-Time Reaction Events

Register a MessageListener to receive reaction events as they happen. This is how you keep your UI in sync when other users add or remove reactions.

TypeScript
JavaScript

let listenerID:string = "UNIQUE_LISTENER_ID";

CometChat.addMessageListener(listenerID, new CometChat.MessageListener({
onMessageReactionAdded:(message: Object) => {
console.log("Reaction added", message);
},
onMessageReactionRemoved:(message: Object) => {
console.log("Reaction removed", message);
}
}))

let listenerID = "UNIQUE_LISTENER_ID";

CometChat.addMessageListener(listenerID, new CometChat.MessageListener({
    onMessageReactionAdded:(message) => {
      console.log("Reaction added", message);
    },
    onMessageReactionRemoved:(message) => {
      console.log("Reaction removed", message);
    }
  }))

Each reaction listener callback receives a ReactionEvent object.

Remove the Listener

TypeScript
JavaScript

let listenerID:string = "UNIQUE_LISTENER_ID";

CometChat.removeMessageListener(listenerID);

let listenerID = "UNIQUE_LISTENER_ID";

CometChat.removeMessageListener(listenerID);

Always remove listeners when they’re no longer needed (e.g., on component unmount or page navigation). Failing to remove listeners can cause memory leaks and duplicate event handling.

Update a Message with Reaction Info

When you receive a real-time reaction event, you’ll want to update the corresponding message object so your UI reflects the change. updateMessageWithReactionInfo() does this — it takes the BaseMessage instance, the MessageReaction event data, and the action type, then returns the updated message.

TypeScript
JavaScript

message.getReactions()

message.getReactions()

The getReactions() method returns an array of ReactionCount objects, each containing the reaction emoji, the total count of users who reacted with it, and whether the logged-in user used that reaction.

Check if Logged-in User has Reacted on Message

To check if the logged-in user has reacted on a particular message or not, You can use the getReactedByMe() method on any ReactionCount object instance. This method will return a boolean value, true if the logged-in user has reacted on that message, otherwise false.

TypeScript
JavaScript

let reactions = message.getReactions();
reactions.forEach((reaction) => {
reaction.getReactedByMe(); //Return true is logged-in user reacted on that message, otherwise false
})   

let reactions = message.getReactions();
reactions.forEach((reaction) => {
reaction.getReactedByMe(); //Return true is logged-in user reacted on that message, otherwise false
}) 

The getReactedByMe() method on a ReactionCount object returns a boolean — true if the logged-in user has reacted with that specific emoji, false otherwise.

Update Message With Reaction Info

When a user adds or removes a reaction, you will receive a real-time event. Once you receive the real time event you would want to update the message with the latest reaction information. To do so you can use the updateMessageWithReactionInfo() method. The updateMessageWithReactionInfo() method provides a seamless way to update the reactions on a message instance (BaseMessage) in real-time. This method ensures that when a reaction is added or removed from a message, the BaseMessage object’s getReactions() property reflects this change immediately. When you receive a real-time reaction event (MessageReaction), call the updateMessageWithReactionInfo() method, passing the BaseMessage instance (message), event data (MessageReaction) and reaction event action type (CometChat.REACTION_ACTION.REACTION_ADDED or CometChat.REACTION_ACTION.REACTION_REMOVED) that corresponds to the message being reacted to.

TypeScript
JavaScript

// The message to which the reaction is related (obtained from fetchPrevious/fetchNext or a listener)
let message!: CometChat.BaseMessage;

// The reaction event data received in real-time (obtained from onMessageReactionAdded/onMessageReactionRemoved)
let messageReaction!: CometChat.MessageReaction;

// The received reaction event real-time action type. Can be CometChatConstants.REACTION_ADDED or CometChatConstants.REACTION_REMOVED
let action: CometChat.REACTION_ACTION = CometChat.REACTION_ACTION.REACTION_ADDED;

let modifiedBaseMessage = CometChat.CometChatHelper.updateMessageWithReactionInfo(
message,
messageReaction,
action
);

// The message to which the reaction is related
let message = ...;

// The reaction event data received in real-time
let messageReaction = ...;

// The recieved reaction event real-time action type. Can be CometChatConstants.REACTION_ADDED or CometChatConstants.REACTION_REMOVED
let action = CometChat.REACTION_ACTION.REACTION_ADDED;

let modifiedBaseMessage = CometChat.CometChatHelper.updateMessageWithReactionInfo(
baseMessage,
messageReaction,
action
);

On success, this method returns a BaseMessage object After calling this method, use modifiedBaseMessage.getReactions() to get the latest reactions and refresh your UI.

Parameter	Type	Description
`message`	`BaseMessage`	The message object to update
`messageReaction`	`MessageReaction`	The reaction event received from the listener
`action`	`REACTION_ACTION`	`CometChat.REACTION_ACTION.REACTION_ADDED` or `CometChat.REACTION_ACTION.REACTION_REMOVED`

Next Steps

Send Messages

Send text, media, and custom messages to users and groups

Receive Messages

Listen for incoming messages in real-time and fetch missed messages

Mentions

Mention specific users in messages

Threaded Messages

Organize conversations with message threads

​Add a Reaction

​Remove a Reaction

​Read Reaction Data from a Message

​Get All Reactions

​Check if the Logged-in User Has Reacted

​Fetch Reactions for a Message

​Fetch Next

​Fetch Previous

​Real-Time Reaction Events

​Remove the Listener

​Update a Message with Reaction Info

​Check if Logged-in User has Reacted on Message

​Update Message With Reaction Info

​Next Steps

Send Messages

Receive Messages

Mentions

Threaded Messages

Add a Reaction

Remove a Reaction

Read Reaction Data from a Message

Get All Reactions

Check if the Logged-in User Has Reacted

Fetch Reactions for a Message

Fetch Next

Fetch Previous

Real-Time Reaction Events

Remove the Listener

Update a Message with Reaction Info

Check if Logged-in User has Reacted on Message

Update Message With Reaction Info

Next Steps