---
id: reactions
title: Reactions
---

import ImageShowcase from '@site/src/components/ImageShowcase';
import GHComponentLink from '../../_docusaurus-components/GHComponentLink';
import ReactionsListAndReactionSelector from '../../assets/reactions-list-and-reaction-selector.png';
import ReactionsListModal from '../../assets/reactions-list-modal.png';

The SDK comes with built-in support for adding reactions to messages. The component library provides three default components to enable reaction selection and display:

- [`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

<ImageShowcase
  items={[
    {
      image: ReactionsListAndReactionSelector,
      caption: 'Default UI of ReactionsList and ReactionSelector',
      alt: 'Default UI of ReactionsList and ReactionSelector',
    },
    {
      image: ReactionsListModal,
      caption: 'Default UI of ReactionsListModal',
      alt: 'Default UI of ReactionsListModal',
    },
  ]}
/>

## Sorting reactions

By default, reactions are sorted chronologically by the first time reaction type was used. You can change this behavior by passing the `sortReactions` prop to the `MessageList` (or `VirtualizedMessageList`).

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

```jsx
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 better performance, keep the sorting function memoized with `useCallback`, or declare it in either global or module scope.

Similarly, the `reactionDetailsSort` object can be passed to the `MessageList` (or `VirtualizedMessageList`) to sort the list of reacted users. The default implementation used by the reactions list modal dialog sorts users in the reverse chronological order of their reactions.

## Customization

See [Reactions Customization](../../guides/theming/reactions.mdx) guide on how to change default reactions or how to replace default `ReactionsList` and `ReactionSelector` components.

## ReactionSelector Props

### Avatar

Custom UI component to display a user's avatar.

| Type      | Default                                                    |
| --------- | ---------------------------------------------------------- |
| component | <GHComponentLink text='Avatar' path='/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']](../contexts/message-context.mdx#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 | <GHComponentLink text='defaultReactionOptions' branch="v11.0.0" path='/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']](../contexts/message-context.mdx#handlefetchreactions) |

The default implementation of `handleFetchReactions`, provided via the [`MessageContext`](../contexts/message-context.mdx#handlefetchreactions), limits the number of loaded reactions to 1200. Use this prop to provide your own loading implementation:

```jsx
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 | <GHComponentLink text='defaultReactionOptions' branch="v11.0.0" path='/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']](../contexts/message-context.mdx#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']](../contexts/message-context.mdx#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 | <GHComponentLink text='defaultReactionOptions' branch="feat/reactions" path='/Reactions/reactionOptions.tsx'/> |

### reactions

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

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