Reactions

Usage

<Reaction event={event} />

Basic usage with default settings (only shows count). Click to see emoji options.

<Reaction event={event} showMany={5} />

Shows the top 5 reaction types with their counts. Click on a reaction to add your own reaction of that type.

How it works

The Reaction component fetches kind 7 reactions for an event using the event's filter. It groups similar reactions (+ and 👍 are grouped as 👍, - and 👎 are grouped as 👎) and counts them. When clicked, it shows a dropdown with emoji options.

When a user selects an emoji, the component creates and publishes a reaction event using event.react(). The showMany prop controls whether to display the top reaction types with their counts.

The component also tracks if the current user has already reacted to the event and updates the UI accordingly.