See who reacted to messages in real-time

Chris -

Emoji reactions give users a lightweight way to express themselves in chat. This update make them even more powerful by letting you see exactly who reacted to any message. 

Real-time reaction data with the JavaScript Data API

You can now subscribe to live updates of adding and removing emoji reactions using the JavaScript Data API (@talkjs/core) 1.9.0. 

With the new ReactionsRef.subscribe() method, you can now watch the list of users who've added a specific reaction to a message. This opens up new possibilities for building engaging chat experiences: display reaction details in a popover, highlight the most active reactors, or build custom emoji analytics.

How to use it:

const msgRef = await session.conversation("meetup").send("hi");
const reactionsRef = msg.reactions(":grinning:");
const sub = reactionsRef.subscribe(reactions => console.log(reactions.map(r => r.user.name)))
await sub.connected;
await reactionRef.add();

Every time someone adds or removes a reaction, your callback receives the updated list of users. The loadedAll parameter tells you whether you're viewing all reactions or just the first batch.

This way you get updated in real-time as reactions change.

Fetch reaction data on-demand

If you only need a quick snapshot without subscribing to updates, use ReactionsRef.getFirstReactions() to fetch the first 10 users who reacted with a specific emoji:

const users = await reactionsRef.getFirstReactions();

This is perfect for displaying a quick preview without having to set up real-time subscriptions. For full lists and live updates, subscribe instead.

Built-in emoji reaction viewer

Don't want to build a custom reactions UI? Components 0.1.9 introduces a new useReactions() hook so you can easily display who reacted to a message.

Just hover over a reaction count, and a tooltip appears showing the first 10 users who added that emoji reaction. It's designed to let you display reaction information just-in-time, such as in a tooltip or popover. 

Users get instant visibility into who engaged with their message.

Get started

Update to the JavaScript Data API (@talkjs/core) 1.9.0 and Components 0.1.9 to enable real-time reactions and built-in tooltips.

Explore the full Emoji Reactions documentation to learn more about subscribing to reactions, fetching reaction data, and managing reactions programmatically.