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 and the Participant Sorting guide.

General usage

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

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.

Props

participant

The participant whose reaction the component should display.

hideAfterTimeoutInMs

Timeout in milliseconds after which the component resets participant reaction state.

emojiReactionMap

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.