Skip to main content

Reactions

The Stream Chat API provides built-in support for adding reactions to messages. The component library provides three default components to enable reaction selection and display:

Basic Usage#

By default, the ReactionSelector and ReactionsList components are included within MessageSimple. To render reaction UI within a custom Message UI component, import both components (or SimpleReactionsList for a lightweight view) and render conditionally.

const CustomMessage = () => {  // consume `MessageContext`  const { message, showDetailedReactions } = useMessageContext();
  return (    <div>      {showDetailedReactions && <ReactionSelector />}      // render remaining custom Message UI      {message.latest_reactions && <ReactionsList reactions={message.latest_reactions} />}    </div>  );};
<Chat client={client}>  <Channel channel={channel} Message={CustomMessage}>    <MessageList />    <MessageInput />  </Channel></Chat>;

UI Customization#

Be default, the ReactionSelector component provides the following reaction options and corresponding emojis:

  • like
  • love
  • haha
  • wow
  • sad
  • angry

The defaultMinimalEmojis data set that populates the default reaction options can be found in the emojiData file in the component library.

To override the default selection set, provide your own array of MinimalEmoji type objects and pass into the reactionOptions prop on the ReactionSelector component. You can also override the default handleReaction function by adding the handleReaction prop.

caution

If custom reactionOptions are supplied to the ReactionSelector component, then the same data set needs to be delivered to the ReactionsList component so the display for processed reactions has the same emoji objects.

const customReactions = [  // add array of custom `ReactionEmoji` type objects here];
const customReactionHandler = (reactionType, event) => {  // add custom handler logic here};
const CustomMessage = () => {  // consume `MessageContext`  const { message, showDetailedReactions } = useMessageContext();
  return (    <div>      {showDetailedReactions && (        <ReactionSelector          handleReaction={customReactionHandler}          reactionOptions={customReactions}        />      )}      // render remaining custom Message UI      {message.latest_reactions && <ReactionsList reactionOptions={customReactions} />}    </div>  );};
<Chat client={client}>  <Channel channel={channel} Message={CustomMessage}>    <MessageList />    <MessageInput />  </Channel></Chat>;

To completely override the ReactionSelector and ReactionsList components in MessageSimple, pass your own custom components as props to the Channel.

const CustomReactionSelector = (props) => {  // add custom reaction selector component here};
const CustomReactionsList = (props) => {  // add custom reactions list component here};
<Chat client={client}>  <Channel    channel={channel}    ReactionSelector={CustomReactionSelector}    ReactionsList={CustomReactionsList}  >    <MessageList />    <MessageInput />  </Channel></Chat>;

ReactionSelector Props#

additionalEmojiProps#

Additional props to be passed to the NimbleEmoji component from emoji-mart.

Type
object

Avatar#

Custom UI component to display a user's avatar.

TypeDefault
componentAvatar

detailedView#

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

TypeDefault
booleantrue

handleReaction#

Function that adds/removes a reaction on a message (overrides the function stored in MessageContext).

TypeDefault
(reactionType: string, event: React.BaseSyntheticEvent) => Promise<void>MessageContextValue['handleReaction']

latest_reactions#

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

Type
array

reaction_counts#

An object that keeps track of the count of each type of reaction on a message (overrides message.reaction_counts from MessageContext).

Type
{ [key: reactionType]: number }

reactionOptions#

A list of the currently supported reactions on a message.

TypeDefault
arraydefaultMinimalEmojis

reverse#

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

TypeDefault
booleanfalse

ReactionsList Props#

onClick#

Custom on click handler for an individual reaction in the list (overrides the function stored in MessageContext).

TypeDefault
(event: React.BaseSyntheticEvent) => Promise<void> | voidMessageContextValue['onReactionListClick']

reaction_counts#

An object that keeps track of the count of each type of reaction on a message (overrides message.reaction_counts from MessageContext).

Type
{ [key: reactionType]: number }

reactionOptions#

A list of the currently supported reactions on a message.

TypeDefault
arraydefaultMinimalEmojis

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.

TypeDefault
booleanfalse

SimpleReactionsList Props#

additionalEmojiProps#

Additional props to be passed to the NimbleEmoji component from emoji-mart.

Type
object

handleReaction#

Function that adds/removes a reaction on a message (overrides the function stored in MessageContext).

TypeDefault
(reactionType: string, event: React.BaseSyntheticEvent) => Promise<void>MessageContextValue['handleReaction']

reaction_counts#

An object that keeps track of the count of each type of reaction on a message (overrides message.reaction_counts from MessageContext).

Type
{ [key: reactionType]: number }

reactionOptions#

A list of the currently supported reactions on a message.

TypeDefault
arraydefaultMinimalEmojis

reactions#

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

Type
array

Did you find this page helpful?