Skip to content

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

Prop Description Type
reaction Reaction summary item to render. object
showCount Whether to render the reaction count next to the icon. Defaults to true. boolean
selected Whether this reaction is currently selected by the active user. Defaults to false. boolean
handleReaction Handles adding/removing a reaction. (reactionType: string) => Promise<void> | undefined
onLongPress Default long press handler for message UI. function
onPress Default press handler for message UI. function
onPressIn Default pressIn handler for message UI. function
preventPress Disables press interactions. boolean
showReactionsOverlay Opens reactions overlay. (reactionType?: string) => void
supportedReactions List of reactions users can add to messages. See customizing reactions. Defaults to reactionData. array

Related Component

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