# Reaction

The `Reaction` component displays emojis in real time for a set duration. Use it to signal things like a raised hand. Default sorting moves participants with raised hands to the top for visibility. Learn more in the [Reactions & Custom Events guide](/video/docs/react/guides/custom-events/) and the [Participant Sorting guide](/video/docs/react/guides/sorting-api/).

![Reaction component preview](@video/react/_assets/ui-components/reaction.png)

## General usage

`DefaultParticipantViewUI` includes `Reaction`. If you're building a custom `ParticipantViewUI`, here's how to add it:

```tsx
import {
  Reaction,
  useParticipantViewContext,
  defaultEmojiReactionMap,
} from "@stream-io/video-react-sdk";

const customEmojiReactionMap = {
  ...defaultEmojiReactionMap,
  ":lol:": "😂",
};

export const CustomParticipantViewUI = () => {
  const { participant } = useParticipantViewContext();
  return (
    <>
      <Reaction
        participant={participant}
        hideAfterTimeoutInMs={5000}
        emojiReactionMap={customEmojiReactionMap}
      />
      {/* your other custom UI elements */}
    </>
  );
};
```

Pass this custom `ParticipantViewUI` to layout components or directly to `ParticipantView` as described in the [ParticipantView customizations guide](/video/docs/react/ui-cookbook/participant-view-customizations/).

## Props

### `participant`

| Type                                                                                                            |
| --------------------------------------------------------------------------------------------------------------- |
| [`StreamVideoParticipant`](https://github.com/GetStream/stream-video-js/blob/main/packages/client/src/types.ts) |

The participant whose reaction the component should display.

### `hideAfterTimeoutInMs`

| Type                    |
| ----------------------- |
| `number` \| `undefined` |

Timeout in milliseconds after which the component resets [participant reaction state](/video/docs/react/guides/custom-events/#clearing-reactions/).

### emojiReactionMap

| Type                     |
| ------------------------ |
| `Record<string, string>` |

Maps emoji keys (for example `:like:`) to emoji characters (for example 👍).

Default mapping:

- `:like:` (renders 👍)
- `:raise-hand:` (renders ✋)
- `:fireworks:`: (renders 🎉)

## Customization

If you want to build your own reaction component, you'll have to provide your own `ParticipantViewUI` component. See the [ParticipantView customizations guide](/video/docs/react/ui-cookbook/participant-view-customizations/).


---

This page was last updated at 2026-05-19T19:59:14.767Z.

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react/ui-components/utility/reaction/](https://getstream.io/video/docs/react/ui-components/utility/reaction/).