Reactions are a fun way to interact in chat apps quickly and are featured in almost all of them. However, some apps handle reactions slightly differently than others. For example, Slack allows a user to add several different reactions to a message. On the other hand, iMessage only allows a single reaction per message. That is because those apps were designed with different use cases in mind. Stream Chat is heavily customizable and can adapt to the design requirements that make the most sense for your chat app's use case.
To make it easier to handle different reaction models, we've introduced a new parameter for the sendReaction function called enforce_unique, which, when set to true, replaces all reactions the user has (if any) on a message, effectively replicating the behavior seen in iMessage.
The enforce_unique parameter is optional, and by default, it is set to false, which presents a reaction behavior similar to Slack.
Send Unique Reaction (iMessage style)
To send a reaction that replaces other reactions the user made, set the fourth parameter in sendReaction (enforce_unique) to true.
// Add reaction 'like' and replace all other reactions to this message from this user
const reaction = await channel.sendReaction(messageID, {
type: 'like'
}, null, true);
Send Multiple Reactions (Slack style)
To send a reaction in addition to the other reactions the user made, you can either set the fourth parameter in sendReaction (enforce_unique) to false or leave it out.
// Add reaction 'like' to all other reactions to this message
const reaction = await channel.sendReaction(messageID, {
type: 'like'
}, null, false);
// Alternatively, you can leave out the last parameter, as it defaults to false
const reaction = await channel.sendReaction(messageID, {
type: 'like'
});
We're excited to bring yet another feature to help you fulfill your app's design requirements. For more information about this new feature, see the documentation on reactions.
If you need help or have specific feedback about this feature, please leave a comment on the documentation page.