Reactions

Last Edit: Jun 06 2020

Stream Chat has built-in support for user Reactions. Common examples are likes, comments, loves, etc. Reactions can be customized so that you are able to use any type of reaction your application requires.

Similar to other objects in Stream Chat, reactions allow you to add custom data to the reaction of your choice. This is helpful if you want to customize the reaction logic.

Custom data for reactions is limited to 1KB.

const reaction = await channel.sendReaction(messageID, {
    type: 'love',
    myCustomField: 123,
});
                    

Reaction reaction = new Reaction(messageId, "like", 1);
channelController.sendReaction(reaction).enqueue(result -> Unit.INSTANCE);
                    

let message = Message(text: "Hello!")

// Extra Data for reaction
struct MyReactionData: Codable {
    let reason: String
}

// Register our extra data type for decoding
Reaction.extraDataType = MyReactionData.self 

// Create our extra data
let reactionData = MyReactionData(reason: "It's awesome!")

message.addReaction(type: "like", score: 1, extraData: reactionData) { (result) in
    // handle result
}
                    

val reaction = Reaction("message-id", "like", 1)

channelController.sendReaction(reaction).enqueue { 
    val reaction = it.data()
}
                    

$response = $channel->sendReaction('message-id', ['type'=>'love','myCustomField'=>123], $userId);
                    

await channel.sendReaction("messageID", "like", extraData: {"customField": 1});
                    

channel.send_reaction(message_id, {"type": "love", "my_custom_field": 123}, user_id)
                    

reaction := &stream_chat.Reaction{
	Type:      "love",
	ExtraData: map[string]interface{}{"my_custom_field": 123},
}
msg, err := channel.SendReaction(reaction, msgID, userID)
                    

Removing a Reaction


await channel.deleteReaction(messageID, 'love');
                    

channelController.deleteReaction(messageId, "like").enqueue(result -> Unit.INSTANCE);
                    

let message = Message(text: "Hello!")
message.deleteReaction(type: "like") { (result) in
    // handle result
}
                    

channelController.deleteReaction("message-id", "like").enqueue { 
    val message = it.data()
}
                    

$response = $channel->deleteReaction('message-id','love', $userId);
                    

await channel.deleteReaction("messageID", "like");
                    

channel.delete_reaction(message_id, "love", user_id)
                    

_, err := channel.DeleteReaction(msgID, "love", userID)
                    

Paginating Reactions

Messages returned by the APIs automatically include the 10 most recent reactions. You can also retrieve more reactions and paginate using the following logic:


// get the first 10 reactions
const response = await channel.getReactions(messageID, { limit: 10 });

// get 3 reactions past the first 10
const response = await channel.getReactions(messageID, { limit: 3, offset: 10 });
                    

// get the first 10 reactions
channelController.getReactions(messageId, 0, 10).enqueue(result -> Unit.INSTANCE);

// get the second 10 reactions
channelController.getReactions(messageId, 10, 10).enqueue(result -> Unit.INSTANCE);

// get 10 reactions after particular reaction
String reactionId = "reaction-id";
channelController.getReactions(messageId, reactionId, 10).enqueue(result -> Unit.INSTANCE);
                    

// Swift SDK currently doesn't support reaction pagination
                    

// get the first 10 reactions
channelController.getReactions(messageId, 0, 10).enqueue {
    val reactions = it.data()
}

// get the second 10 reactions
channelController.getReactions(messageId, 10, 10).enqueue {
    val reactions = it.data()
}

// get 10 reactions after particular reaction
val reactionId = "reaction-id"
channelController.getReactions(messageId, reactionId, 10).enqueue {
    val reactions = it.data()
}
                    

// get the first 10 reactions
$response = $channel->getReactions('message-id',['limit' => 10]);

// get 3 reactions past the first 10
$response = $channel->getReactions('message-id',['limit' => 3, 'offset' => 10]);
                    

// get the first 10 reactions
await channel.getReactions("messageID", PaginationParams(limit: 10));

// get 3 reactions past the first 10
await channel.getReactions("messageID", PaginationParams(limit: 3, offset:10));
                    

# get the first 10 reactions
channel.get_reactions(message_id)

# get 3 reactions past the first 10
channel.get_reactions(message_id, limit=3, offset=10)
                    

options := map[string][]string{
	"limit": {"10"},
	"idlte": {"10"},
}
        
_, err := channel.GetReactions(msgID, options)
                    

Cumulative (Clap) Reactions

You can use the Reactions API to build something similar to Medium's clap reactions. If you are not familiar with this, Medium allows you to clap articles more than once and shows the sum of all claps from all users.

To do this, you only need to include a score for the reaction (ie. user X clapped 25 times) and the API will return the sum of all reaction scores as well as each user individual scores (ie. clapped 475 times, user Y clapped 14 times).


// user claps 5 times on a message
await channel.sendReaction(messageID, {
    type: 'clap',
    score: 5,
});

// same user claps 20 times more
await channel.sendReaction(messageID, {
    type: 'clap',
   score: 25,
});
                    

// user claps 5 times on a message
await channel.sendReaction("messageID", "like", score: 5);

// same user claps 20 times more
await channel.sendReaction("messageID", "like", score: 25);
                    

# user claps 5 times on a message
channel.send_reaction(message_id, {"type": "clap", "score": 5}, user_id)

# same user claps 20 times more
channel.send_reaction(message_id, {"type": "clap", "score": 25}, user_id)
                    

int score = 5;
Reaction reaction = new Reaction(messageId, "like", score);

channelController.sendReaction(reaction).enqueue(result -> Unit.INSTANCE);
                    

val score = 5
val reaction = Reaction("message-id", "like", score)

channelController.sendReaction(reaction).enqueue {
    val reaction = it.data()
}
                    

// user claps 5 times on a message
$channel->sendReaction('message-id', ['type'=>'clap', 'score'=>5], $userId);

// same user claps 20 times more
$channel->sendReaction('message-id', ['type'=>'clap', 'score'=>25], $userId);
                    

_, err = channel.SendReaction(&stream_chat.Reaction{
	Type: "clap", ExtraData: map[string]interface{}{"score": 25},
}, msgID, userID)
                    

let message = Message(text: "Hello!")
message.addReaction(type: "clap", score: 2) { (result) in
    // handle result
}