> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Reactions

> Add, remove, fetch, and listen for message reactions with the CometChat JavaScript SDK.

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.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    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);
    })

    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    let messageId = "1";
    let emoji = "😊";

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

## Remove a Reaction

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

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    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);
    })

    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    let messageId = "1";
    let emoji = "😊";

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

Both `addReaction()` and `removeReaction()` return a [`BaseMessage`](/sdk/reference/messages#basemessage) object with the updated reactions.

## Read Reaction Data from a Message

Any [`BaseMessage`](/sdk/reference/messages#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`](/sdk/reference/auxiliary#reactioncount) objects, or an empty array if no one has reacted.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    message.getReactions()
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    message.getReactions()    
    ```
  </Tab>
</Tabs>

### Check if the Logged-in User Has Reacted

Call `getReactedByMe()` on any [`ReactionCount`](/sdk/reference/auxiliary#reactioncount) object to check whether the logged-in user has reacted with that particular emoji. Returns `true` if they have, `false` otherwise.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    let reactions = message.getReactions();
    reactions.forEach((reaction) => {
    reaction.getReactedByMe(); //Return true is logged-in user reacted on that message, otherwise false
    })   
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    let reactions = message.getReactions();
    reactions.forEach((reaction) => {
    reaction.getReactedByMe(); //Return true is logged-in user reacted on that message, otherwise false
    }) 
    ```
  </Tab>
</Tabs>

## 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

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    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);
    },
    );

    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    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);
     },
     );
    ```
  </Tab>
</Tabs>

The `fetchNext()` method returns an array of [`Reaction`](/sdk/reference/auxiliary#reaction) objects representing individual user reactions on the message.

Fetch Previous The `fetchPrevious()` method fetches the previous set of reactions for the message.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    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);
    },
    );

    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    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);
        },
      );
    ```
  </Tab>
</Tabs>

### Fetch Previous

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    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);
    },
    );

    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    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);
        },
      );
    ```
  </Tab>
</Tabs>

## 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.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    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);
    }
    }))

    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    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);
        }
      }))
    ```
  </Tab>
</Tabs>

Each reaction listener callback receives a [`ReactionEvent`](/sdk/reference/auxiliary#reactionevent) object.

### Remove the Listener

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    let listenerID:string = "UNIQUE_LISTENER_ID";

    CometChat.removeMessageListener(listenerID);

    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    let listenerID = "UNIQUE_LISTENER_ID";

    CometChat.removeMessageListener(listenerID);
    ```
  </Tab>
</Tabs>

<Warning>
  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.
</Warning>

## 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`](/sdk/reference/messages#basemessage) instance, the [`MessageReaction`](/sdk/reference/auxiliary#messagereaction) event data, and the action type, then returns the updated message.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    message.getReactions()
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    message.getReactions()    
    ```
  </Tab>
</Tabs>

The `getReactions()` method returns an array of [`ReactionCount`](/sdk/reference/auxiliary#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.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    let reactions = message.getReactions();
    reactions.forEach((reaction) => {
    reaction.getReactedByMe(); //Return true is logged-in user reacted on that message, otherwise false
    })   
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    let reactions = message.getReactions();
    reactions.forEach((reaction) => {
    reaction.getReactedByMe(); //Return true is logged-in user reacted on that message, otherwise false
    }) 
    ```
  </Tab>
</Tabs>

The `getReactedByMe()` method on a [`ReactionCount`](/sdk/reference/auxiliary#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.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    // 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
    );

    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    // 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
    );
    ```
  </Tab>
</Tabs>

On success, this method returns a [`BaseMessage`](/sdk/reference/messages#basemessage) object

After calling this method, use modifiedBaseMessage.getReactions() to get the latest reactions and refresh your UI.

| Parameter         | Type                                                          | Description                                                                                |
| ----------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| `message`         | [`BaseMessage`](/sdk/reference/messages#basemessage)          | The message object to update                                                               |
| `messageReaction` | [`MessageReaction`](/sdk/reference/auxiliary#messagereaction) | The reaction event received from the listener                                              |
| `action`          | `REACTION_ACTION`                                             | `CometChat.REACTION_ACTION.REACTION_ADDED` or `CometChat.REACTION_ACTION.REACTION_REMOVED` |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Send Messages" icon="paper-plane" href="/sdk/javascript/send-message">
    Send text, media, and custom messages to users and groups
  </Card>

  <Card title="Receive Messages" icon="inbox" href="/sdk/javascript/receive-message">
    Listen for incoming messages in real-time and fetch missed messages
  </Card>

  <Card title="Mentions" icon="at" href="/sdk/javascript/mentions">
    Mention specific users in messages
  </Card>

  <Card title="Threaded Messages" icon="comments" href="/sdk/javascript/threaded-messages">
    Organize conversations with message threads
  </Card>
</CardGroup>