Reactions

The SDK includes built-in message reactions. The component library provides three default components:

• ReactionSelector - allows the connected user to select a reaction on a message
• ReactionsList (and ReactionsListModal) - displays the reactions added to a message
• SimpleReactionsList - displays a minimal list of the reactions added to a message

Best Practices

• Keep reaction options concise to avoid overwhelming users.
• Memoize sortReactions and reactionDetailsSort for performance.
• Use SimpleReactionsList in compact views or dense message layouts.
• Align reaction visibility with moderation and user permission rules.
• Avoid custom reactions that overlap with emoji picker semantics.

Sorting reactions

By default, reactions are sorted chronologically by the first time a reaction type was used. You can change this with sortReactions on MessageList (or VirtualizedMessageList).

In this example, we sort the reactions in the descending order by the number of users:

function sortByReactionCount(a, b) {
  return b.reactionCount - a.reactionCount;
}

<Chat client={client}>
  <Channel
    channel={channel}
    ReactionSelector={CustomReactionSelector}
    ReactionsList={CustomReactionsList}
  >
    <MessageList sortReactions={sortByReactionCount} />
    <MessageInput />
  </Channel>
</Chat>;

For performance, memoize the sort function with useCallback or define it at module scope.

Similarly, pass reactionDetailsSort to MessageList (or VirtualizedMessageList) to sort reacted users. The default modal sorts in reverse chronological order.

Customization

See the Reactions Customization guide to change default reactions or replace ReactionsList and ReactionSelector.

ReactionSelector Props

Avatar

Custom UI component to display a user's avatar.

detailedView

If true, shows the user's avatar with the reaction.

handleReaction

Function that adds/removes a reaction on a message (overrides the function coming from MessageContext).

latest_reactions

An array of the reaction objects to display in the list (overrides message.latest_reactions from MessageContext).

own_reactions

An array of own reaction objects to display in the list (overrides message.own_reactions from MessageContext).

reaction_groups

An object that keeps track of the reactions on a message (overrides message.reaction_groups from MessageContext).

reactionOptions

A list of the currently supported reactions on a message.

reverse

If true, adds a CSS class that reverses the horizontal positioning of the selector.

ReactionsList Props

handleFetchReactions

Function that loads the message reactions (overrides the function coming from MessageContext).

The default implementation of handleFetchReactions, provided via the MessageContext, limits the number of loaded reactions to 1200. Use this prop to provide your own loading implementation:

const MyCustomReactionsList = (props) => {
  const { channel } = useChannelStateContext();
  const { message } = useMessageContext();

  function fetchReactions() {
    return channel.getReactions(message.id, { limit: 42 });
  }

  return <ReactionsList handleFetchReactions={fetchReactions} />;
};

own_reactions

An array of the own reaction objects to distinguish own reactions visually (overrides message.own_reactions from MessageContext).

reaction_groups

An object that keeps track of the reactions on a message (overrides message.reaction_groups from MessageContext).

reactionOptions

A list of the currently supported reactions on a message.

reactions

An array of the reaction objects to display in the list (overrides message.latest_reactions from MessageContext).

reverse

If true, adds a CSS class that reverses the horizontal positioning of the selector.

reactionDetailsSort

Sort options to provide to a reactions query. Affects the order of reacted users in the default reactions modal. This prop overrides the function stored in MessageContext.

sortReactions

Comparator function to sort reactions. Should have the same signature as an array's sort method. This prop overrides the function stored in MessageContext.

SimpleReactionsList Props

handleFetchReactions

Function that loads the message reactions (overrides the function coming from MessageContext).

handleReaction

Function that adds/removes a reaction on a message (overrides the function coming from MessageContext).

own_reactions

An array of the own reaction objects to distinguish own reactions visually (overrides message.own_reactions from MessageContext).

reaction_groups

An object that keeps track of the reactions on a message (overrides message.reaction_groups from MessageContext).

reactionOptions

A list of the currently supported reactions on a message.

reactions

An array of the reaction objects to display in the list (overrides message.latest_reactions from MessageContext).