ReactionListItem

ReactionListItem renders a single reaction chip inside reaction lists.

Best Practices

  • Keep reaction data stable to reduce unnecessary re-renders.
  • Use selected to clearly indicate the current user's reaction state.
  • Use showCount={false} only when count context is available elsewhere.
  • Keep interaction handlers lightweight.
  • Reuse supportedReactions from Channel config for icon consistency.

Props

PropDescriptionType
reactionReaction summary item to render.object
showCountWhether to render the reaction count next to the icon. Defaults to true.boolean
selectedWhether this reaction is currently selected by the active user. Defaults to false.boolean
handleReactionHandles adding/removing a reaction.(reactionType: string) => Promise<void> | undefined
onLongPressDefault long press handler for message UI.function
onPressDefault press handler for message UI.function
onPressInDefault pressIn handler for message UI.function
preventPressDisables press interactions.boolean
showReactionsOverlayOpens reactions overlay.(reactionType?: string) => void
supportedReactionsList of reactions users can add to messages. See customizing reactions. Defaults to reactionData.array

ReactionListItem.tsx also exports ReactionListCountItem, which renders the overflow count chip (+N) for additional reactions.

Previous
ReactionListClustered
Next
ReactionListItemWrapper