# Reactions

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

- [`ReactionSelector`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionSelector.tsx) - allows the connected user to select a reaction on a message
- [`ReactionsList`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionsList.tsx) (and [`ReactionsListModal`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionsListModal.tsx)) - displays the reactions added to a message
- [`SimpleReactionsList`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/SimpleReactionsList.tsx) - 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.

<gallery>

![Default UI of ReactionsList and ReactionSelector](@chat-sdk/react/v13/_assets/reactions-list-and-reaction-selector.png)

![Default UI of ReactionsListModal](@chat-sdk/react/v13/_assets/reactions-list-modal.png)

</gallery>

## 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:

```tsx
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](/chat/docs/sdk/react/v13/guides/theming/reactions/) guide to change default reactions or replace `ReactionsList` and `ReactionSelector`.

## ReactionSelector Props

### Avatar

Custom UI component to display a user's avatar.

| Type      | Default                                                                                               |
| --------- | ----------------------------------------------------------------------------------------------------- |
| component | [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) |

### detailedView

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

| Type    | Default |
| ------- | ------- |
| boolean | true    |

### handleReaction

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

| Type                                                                       | Default                                                                                                              |
| -------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| `(reactionType: string, event: React.BaseSyntheticEvent) => Promise<void>` | [MessageContextValue['handleReaction']](/chat/docs/sdk/react/v13/components/contexts/message_context#handlereaction) |

### latest_reactions

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

| Type  |
| ----- |
| array |

### own_reactions

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

| Type  |
| ----- |
| array |

### reaction_groups

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

| Type                                             |
| ------------------------------------------------ |
| `{ [key: reactionType]: ReactionGroupResponse }` |

### reactionOptions

A list of the currently supported reactions on a message.

| Type  | Default                                                                                                                                |
| ----- | -------------------------------------------------------------------------------------------------------------------------------------- |
| array | [defaultReactionOptions](https://github.com/GetStream/stream-chat-react/blob/release-v13/src/components/Reactions/reactionOptions.tsx) |

### reverse

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

| Type    | Default |
| ------- | ------- |
| boolean | false   |

## ReactionsList Props

### handleFetchReactions

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

| Type                  | Default                                                                                                                          |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| `() => Promise<void>` | [MessageContextValue['handleFetchReactions']](/chat/docs/sdk/react/v13/components/contexts/message_context#handlefetchreactions) |

The default implementation of `handleFetchReactions`, provided via the [`MessageContext`](/chat/docs/sdk/react/v13/components/contexts/message_context#handlefetchreactions/), limits the number of loaded reactions to 1200. Use this prop to provide your own loading implementation:

```tsx
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`).

| Type  |
| ----- |
| array |

### reaction_groups

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

| Type                                             |
| ------------------------------------------------ |
| `{ [key: reactionType]: ReactionGroupResponse }` |

### reactionOptions

A list of the currently supported reactions on a message.

| Type  | Default                                                                                                                                |
| ----- | -------------------------------------------------------------------------------------------------------------------------------------- |
| array | [defaultReactionOptions](https://github.com/GetStream/stream-chat-react/blob/release-v13/src/components/Reactions/reactionOptions.tsx) |

### reactions

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

| Type  |
| ----- |
| array |

### reverse

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

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### 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`.

| Type                     | Default                     |
| ------------------------ | --------------------------- |
| `{ created_at: number }` | reverse chronological order |

### 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`.

| Type                                                     | Default             |
| -------------------------------------------------------- | ------------------- |
| (this: ReactionSummary, that: ReactionSummary) => number | chronological order |

## SimpleReactionsList Props

### handleFetchReactions

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

| Type                  | Default                                                                                                                          |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| `() => Promise<void>` | [MessageContextValue['handleFetchReactions']](/chat/docs/sdk/react/v13/components/contexts/message_context#handlefetchreactions) |

### handleReaction

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

| Type                                                                       | Default                                                                                                              |
| -------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| `(reactionType: string, event: React.BaseSyntheticEvent) => Promise<void>` | [MessageContextValue['handleReaction']](/chat/docs/sdk/react/v13/components/contexts/message_context#handlereaction) |

### own_reactions

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

| Type  |
| ----- |
| array |

### reaction_groups

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

| Type                                             |
| ------------------------------------------------ |
| `{ [key: reactionType]: ReactionGroupResponse }` |

### reactionOptions

A list of the currently supported reactions on a message.

| Type  | Default                                                                                                                                |
| ----- | -------------------------------------------------------------------------------------------------------------------------------------- |
| array | [defaultReactionOptions](https://github.com/GetStream/stream-chat-react/blob/release-v13/src/components/Reactions/reactionOptions.tsx) |

### reactions

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

| Type  |
| ----- |
| array |


---

This page was last updated at 2026-04-21T09:53:40.575Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v13/components/message-components/reactions/](https://getstream.io/chat/docs/sdk/react/v13/components/message-components/reactions/).