Reaction components

The reaction components draw a message's reactions and let the user add them:

• ReactionSelector: the quick reactions, opened from the smiley button next to a message or from Add reaction in its menu;
• ReactionSelectorExtendedList: the full list, behind the selector's + button and the dialog's add button;
• MessageReactions: the reactions on the message, with their counts;
• MessageReactionsDetail: the dialog that lists who reacted.

Each is an override key, and reactionOptions sets the reactions they offer. Reactions explains how they work together, and how to change the reactions on offer, their style, their order and what a reaction does.

Best practices

• Set reactionOptions once, around the whole app, so the selector, the message and the dialog show the same reactions.
• Wrap a replacement for ReactionSelector in forwardRef. The key is typed as a forwardRef component, so a plain function doesn't type-check.
• Declare sortReactions outside the component. A new comparator on every render sorts the reactions again on every render.

Customization

The SDK renders the ReactionSelector key in a dialog next to the message. From the smiley button it passes no props, from the menu only dialogId, and it never passes a ref. This replacement puts the default selector in a frame of its own:

import { forwardRef } from "react";
import type { ReactionSelectorProps } from "stream-chat-react";
import { ReactionSelector, WithComponents } from "stream-chat-react";

const FramedReactionSelector = forwardRef<
  HTMLDivElement,
  ReactionSelectorProps
>(function FramedReactionSelector(props, ref) {
  return (
    <div className="framed-reaction-selector" ref={ref}>
      <ReactionSelector {...props} />
    </div>
  );
});

const overrides = { ReactionSelector: FramedReactionSelector };

export const App = () => (
  <WithComponents overrides={overrides}>
    {/* the rest of the app */}
  </WithComponents>
);

Changing what a reaction does replaces the handler the same way.

ReactionSelector props

The selector closes after a pick when the list's closeReactionSelectorOnClick is set. Its + button shows only when reactionOptions has extended reactions.

ReactionSelectorExtendedList takes the same props. It renders nothing without extended reactions. The default isn't exported by name; it's ReactionSelector.ExtendedList.

MessageReactions props

Only the reaction types in reactionOptions show, and a message with none of them renders nothing. Clicking the reactions opens MessageReactionsDetail, showing all reactions in the clustered style and the clicked type in the segmented one. A message with more than 1000 reactions doesn't open it.

ReactionsComparator isn't exported. Type a comparator as MessageListProps['sortReactions']; it compares two summaries with reactionType, reactionCount, firstReactionAt, lastReactionAt and isOwnReaction.

MessageReactionsDetail props

MessageReactions renders the dialog with every prop but dialogId, handleReaction, own_reactions and sort.

The add button shows only when reactionOptions has extended reactions, and opens ReactionSelectorExtendedList in the dialog. While users load, the dialog renders the LoadingIndicator key, or MessageReactionsDetailLoadingIndicator by default. That skeleton is exported for a dialog of your own.

Related exports

Hooks

• useMessageContext() gives handleReaction, handleFetchReactions, sortReactions and reactionDetailsSort.
• useReactionHandler(message) and useReactionsFetcher(message) build the context's two handlers, for a component outside a message. See Message hooks.
• useComponentContext() returns reactionOptions and the reaction overrides in effect.