---
source_url: https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/reactions
title: Reactions
updated_at: 2026-06-15T12:11:13.326Z
---

> Documentation Index
> For a curated overview of PubNub documentation, see: https://www.pubnub.com/docs/llms.txt
> For the full list of all documentation pages, see: https://www.pubnub.com/docs/llms-full.txt


# Reactions

Manage emoji reactions on messages in your Chat SDK app. Users can add, remove, and view reactions on any message.

:::note Message Actions vs. Message Reactions
**Message Actions** is the flexible, low-level API for adding any metadata to messages (read receipts, delivery confirmations, custom data), while **Message Reactions** specifically refers to using Message Actions for emoji/social reactions.
In PubNub [Core](https://www.pubnub.com/docs/sdks) and [Chat](https://www.pubnub.com/docs/chat/overview) SDKs, the same underlying Message Actions API is referred to as **Message Reactions** when used for emoji reactions - it's the same functionality, just different terminology depending on the use case.
:::

## Interactive demo

Check what a sample implementation could look like in a React app showcasing how to add and remove message reactions.

:::tip Want to implement something similar?
Read [how to](https://www.pubnub.com/how-to/chat-sdk-add-reactions-to-messages/) do that or go straight to the demo's [source code](https://github.com/PubNubDevelopers/Chat-SDK-How-Tos/tree/main/reactions).
:::

### Test it out

Follow the instructions on the interactive demo.

## Add & delete

`toggleReaction()` is a method for both adding and removing message reactions. It adds a string flag to the message if the current user hasn't added it yet or removes it if the current user already added it before.

If you use this method to add or remove message reactions, this flag would be a literal emoji you could implement in your app's UI. However, you could also use this method for a different purpose, like marking a message as pinned to a channel or unpinned if you implement the [pinning feature](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/pinned) in your chat app.

##### Under the hood

`toggleReaction()` calls Message Reactions API and the JavaScript SDK `getUUID()` method.

### Method signature

This method takes the following parameters:

```ts
message.toggleReaction(
    reaction: string
): Promise<Message>
```

#### Input

| Parameter | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| reaction | string | Yes |  | Emoji added to the message or removed from it by the current user. |

#### Output

| Type | Description |
| --- | --- |
| `Promise<Message>` | Updated message instance with an added `reactions` action type. |

### Sample code

Add the "thumb up" emoji (`\u{1F44D}`) to the last message on the `support` channel.

```ts
// reference the "support" channel with the message you want to react to
const channel = await chat.getChannel("support")

// reference the last message on that "support" channel
const message = (await channel.getHistory({count: 1})).messages[0]

// add the "thumb up" emoji to that message
const newMsg = await message.toggleReaction("\u{1F44D}")

// the returned message needs to replace any existing message in your app’s message list
```

## Get updates

To learn how to receive updates whenever a message reaction is added, edited, or removed on other clients, head to the [Get updates](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/updates#get-message-updates) section.

## Get reactions for one message

`reactions` is a getter method that returns a list of all reactions added to the given message. Each entry in the array describes one distinct reaction value, whether the current user added it, and which users have reacted with it.

The `MessageReaction` type has the following shape:

```ts
type MessageReaction = {
    value: string
    isMine: boolean
    userIds: string[]
}
```

### Method signature

This method has the following signature:

```ts
message.reactions: MessageReaction[]
```

#### Properties

| Property | Description |
| --- | --- |
| `reactions`Type: `MessageReaction[]` | Array of reaction objects for the message. |
| `> value`Type: `string` | The reaction string (for example, an emoji like `"👍"`). |
| `> isMine`Type: `boolean` | Whether the current user has added this reaction. |
| `> userIds`Type: `string[]` | Array of user IDs who have reacted with this value. |

### Sample code

List all reactions added to the last message on the `support` channel.

```ts
// reference the "support" channel with the message you want to check
const channel = await chat.getChannel("support")

// reference the last message on that "support" channel
const message = (await channel.getHistory({count: 1})).messages[0]

// list all reactions added to the message
console.log(message.reactions)
```

## Get historical reactions

If you have [Message Persistence](https://www.pubnub.com/docs/sdks/javascript/api-reference/storage-and-playback) enabled on your keyset, PubNub stores all historical info about messages, their metadata, and reactions.

If you want to fetch historical info about message reactions, use the [getHistory()](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/history) method. By default, when you fetch historical messages, PubNub returns all message reactions and metadata attached to the retrieved messages.

## Check

`hasUserReaction()` checks if the current user added a given emoji to the message.

### Method signature

This method takes the following parameters:

```ts
message.hasUserReaction(
    reaction: string
): boolean
```

#### Input

| Parameter | Description |
| --- | --- |
| `reaction` *Type: `string`Default: n/a | Specific emoji added to the message. |

#### Output

| Type | Description |
| --- | --- |
| `boolean` | Specifies if the current user added a given emoji to the message or not. |

### Sample code

Check if the current user added the "thumb up" emoji (👍) to the last message on the `support` channel.

```ts
// reference the "support" channel with the message you want to check
const channel = await chat.getChannel("support")

// reference the last message on that "support" channel
const message = (await channel.getHistory({count: 1})).messages[0]

// check if the current user added the "thumb up" emoji to the message
message.hasUserReaction("👍")
```