This is beta documentation for Stream Chat React SDK v14. For the latest stable version, see the latest version (v13) .

Reactions

The SDK includes built-in message reactions. The main reaction surfaces are:

ReactionSelector for selecting a reaction
ReactionsList for displaying grouped reactions on a message
SimpleReactionsList for compact reaction displays
MessageReactionsDetail for the user-detail dialog content

Best Practices

Keep reaction options concise so the selector stays scannable.
Memoize custom sortReactions comparators.
Use SimpleReactionsList in dense or compact layouts.
Customize the selector and detail dialog together so their emoji sets stay aligned.
Prefer reaction_groups over legacy reaction_counts.

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.

import { Channel, MessageInput, MessageList } from "stream-chat-react";

const sortByReactionCount = (a, b) => b.reactionCount - a.reactionCount;

const App = () => (
  <Channel>
    <MessageList sortReactions={sortByReactionCount} />
    <MessageInput />
  </Channel>
);

Pass reactionDetailsSort to MessageList or VirtualizedMessageList to control the order of users in the default reaction-detail dialog.

Customization

Use WithComponents to replace the default reaction surfaces for a Channel subtree:

import {
  Channel,
  ChannelHeader,
  MessageInput,
  MessageList,
  MessageReactionsDetail,
  ReactionSelector,
  ReactionsList,
  Thread,
  Window,
  WithComponents,
} from "stream-chat-react";

const CustomReactionSelector = (props) => <ReactionSelector {...props} />;
const CustomReactionsList = (props) => (
  <ReactionsList {...props} visualStyle="segmented" />
);
const CustomMessageReactionsDetail = (props) => (
  <MessageReactionsDetail {...props} />
);

const App = () => (
  <WithComponents
    overrides={{
      MessageReactionsDetail: CustomMessageReactionsDetail,
      ReactionSelector: CustomReactionSelector,
      ReactionsList: CustomReactionsList,
    }}
  >
    <Channel>
      <Window>
        <ChannelHeader />
        <MessageList />
        <MessageInput />
      </Window>
      <Thread />
    </Channel>
  </WithComponents>
);

ReactionSelector Props

Prop	Description	Type
`handleReaction`	Function that adds or removes a reaction. Overrides the value from `MessageContext`.	`(reactionType: string, event: React.BaseSyntheticEvent) => Promise<void>`
`own_reactions`	Own reactions used to highlight the selected state.	`ReactionResponse[]`

ReactionsList Props

Prop	Description	Type
`flipHorizontalPosition`	Controls whether the horizontal position is flipped relative to the current message alignment. Defaults to `false`.	`boolean`
`handleFetchReactions`	Custom loader for reaction details.	`MessageContextValue["handleFetchReactions"]`
`own_reactions`	Own reactions used to highlight the current user's reactions.	`ReactionResponse[]`
`reaction_groups`	Grouped reaction summary used to build the list. Prefer this over legacy `reaction_counts`.	`Record<string, ReactionGroupResponse>`
`reactionDetailsSort`	Sort options used when loading reaction details for `MessageReactionsDetail`.	`MessageContextValue["reactionDetailsSort"]`
`reactions`	Raw reaction objects used to build the grouped list.	`ReactionResponse[]`
`reverse`	Displays reactions in reverse order. Defaults to `false`.	`boolean`
`sortReactionDetails`	Legacy comparator used to sort reaction-detail users.	`ReactionDetailsComparator`
`sortReactions`	Comparator used to order grouped reactions.	`ReactionsComparator`
`verticalPosition`	Controls whether the list renders above or below the message bubble. Defaults to `'top'`.	`'top' \| 'bottom' \| null`
`visualStyle`	Controls whether the list renders in `clustered` or `segmented` mode. Defaults to `'clustered'`.	`'clustered' \| 'segmented' \| null`

SimpleReactionsList Props

SimpleReactionsList accepts the same reaction data props as ReactionsList and additionally supports handleReaction.

MessageReactionsDetail Props

Prop	Description	Type
`handleFetchReactions`	Custom loader for fetching reaction details.	`MessageContextValue["handleFetchReactions"]`
`onSelectedReactionTypeChange`	Callback used when the selected reaction type changes.	`(reactionType: ReactionType \| null) => void`
`reactionDetailsSort`	Sort options used to fetch reaction details.	`MessageContextValue["reactionDetailsSort"]`
`reactions`	Grouped reaction summary used to build the detail UI.	`ReactionSummary[]`
`selectedReactionType`	Currently selected reaction type in the detail view.	`ReactionType \| null`
`sort`	Sort options for the fetched reaction details.	`ReactionSort`
`sortReactionDetails`	Legacy comparator used to sort reaction-detail users after fetching.	`ReactionDetailsComparator`
`totalReactionCount`	Total number of reactions shown in the detail dialog.	`number`

Attachments

DateSeparator