Reactions

Add, get, and delete message reactions for messages sent on apps built with the Chat SDK.

Interactive demo

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

Want to implement something similar?

Read how to do that or go straight to the demo's source code.

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 in your chat app.

Under the hood

Method signature

This method takes the following parameters:

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

Input

Parameter	Type	Required	Default	Description
reaction	string	Yes	n/a	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.

Basic usage

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

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

Get reactions for one message

reactions is a getter method that returns a list of all reactions added to the given messages (with the ID of the user who added it and the timetoken stating when this action was added).

Method signature

This method has the following signature:

message.reactions: {
    [value: string]: {
        uuid: string,
        actionTimetoken: string | number
    }[]
}

Properties

Property	Type	Description
object	array	Object where each key is a string (emoji) and each value is an array of objects (a pair listing the ID of the user who added the emoji and the timetoken stating when it was added).
→ uuid	string	ID of the user who added the emoji.
→ actionTimetoken	string or number	Token with the time when the emoji was added to the message.

Basic usage

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

// 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 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() 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:

message.hasUserReaction(
    reaction: string
): boolean

Input

Parameter	Type	Required	Default	Description
reaction	string	Yes	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.

Basic usage

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

// 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
await message.hasUserReaction("👍")