Skip to main content
{
  "component": "CometChatReactions",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatReactions } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "description": "Displays emoji reaction chips on message bubbles with hover tooltips, a full reactor list, and overflow handling.",
  "cssRootClass": ".cometchat-reactions",
  "primaryOutput": {
    "prop": "onReactionClick",
    "type": "(emoji: string, message: CometChat.BaseMessage) => void"
  },
  "props": {
    "data": {
      "message": { "type": "CometChat.BaseMessage", "note": "Required. The message to show reactions for." },
      "alignment": { "type": "'left' | 'right' | 'center'", "default": "'left'" },
      "reactionsRequestBuilder": { "type": "CometChat.ReactionsRequestBuilder" }
    },
    "callbacks": {
      "onReactionClick": { "type": "(emoji: string, message: CometChat.BaseMessage) => void" },
      "onReactorClick": { "type": "(reaction: CometChat.Reaction, message: CometChat.BaseMessage) => void" },
      "onError": { "type": "(error: unknown) => void" }
    }
  },
  "types": {
    "CometChatReactionsRootProps": "Root provider props",
    "CometChatReactionsBarProps": "Reaction chips bar props",
    "CometChatReactionsChipProps": "Single reaction chip props",
    "CometChatReactionsInfoProps": "Hover tooltip props",
    "CometChatReactionsListProps": "Full reactor list props",
    "CometChatReactionsOverflowProps": "Overflow button props"
  }
}

​
Where It Fits

CometChatReactions renders below message bubbles to show emoji reactions. It is typically used inside CometChatMessageBubble as the footer view. The parent (usually CometChatMessageList) owns the reaction add/remove SDK calls and passes the updated message down.
Live Preview — interact with the reactions component.Open in Storybook ↗
import { CometChatReactions } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function MessageBubbleFooter({ message, onReactionClick }) {
  return (
    <CometChatReactions.Root
      message={message}
      alignment="right"
      onReactionClick={onReactionClick}
    />
  );
}

​
Minimal Render

import { CometChatReactions } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function Demo({ message }) {
  return <CometChatReactions.Root message={message} />;
}
Root CSS class: .cometchat-reactions

​
Sub-Components

CometChatReactions is a compound component with these sub-components:
Sub-ComponentPurpose
RootContext provider. Receives message and config.
BarReaction chips container with role="group". Auto-calculates overflow via ResizeObserver.
ChipSingle reaction button with emoji, count, and aria-pressed.
InfoHover tooltip showing who reacted with a specific emoji.
ListFull reactor list popover with tab filtering and pagination.
Overflow”+N more” button for overflow reactions.

​
Custom Layout

Compose sub-components to customize the layout: 
<CometChatReactions.Root message={message}>
  <CometChatReactions.Bar maxVisible={5} />
</CometChatReactions.Root>

​
Standalone List

Use the List sub-component independently: 
<CometChatReactions.Root message={message}>
  <CometChatReactions.List />
</CometChatReactions.Root>

​
Actions and Events

​
Callback Props

​
onReactionClick

Called when a reaction chip is clicked. The parent (MessageList) handles the SDK call for adding/removing the reaction. 
<CometChatReactions.Root
  message={message}
  onReactionClick={(emoji, msg) => {
    console.log(`Toggled ${emoji} on message ${msg.getId()}`);
  }}
/>

​
onReactorClick

Called when a user in the reaction list is clicked. Useful for removing own reactions. 
<CometChatReactions.Root
  message={message}
  onReactorClick={(reaction, msg) => {
    console.log(`Clicked reactor: ${reaction.getReactedBy().getName()}`);
  }}
/>

​
onError

Called when an error occurs during reactor detail fetching. 
<CometChatReactions.Root
  message={message}
  onError={(error) => console.error("Reaction error:", error)}
/>

​
CSS Architecture

The component uses CSS custom properties defined in @cometchat/chat-uikit-react/css-variables.css.

​
Key Selectors

TargetSelector
Root.cometchat-reactions
Bar.cometchat-reactions__bar
Chip.cometchat-reactions__chip
Chip (active).cometchat-reactions__chip--active
Chip emoji.cometchat-reactions__chip-emoji
Chip count.cometchat-reactions__chip-count
Overflow.cometchat-reactions__overflow
Info tooltip.cometchat-reactions__info
Info content.cometchat-reactions__info-content
List.cometchat-reactions__list
List tabs.cometchat-reactions__list-tabs
List tab (active).cometchat-reactions__list-tabs-tab--active
List items.cometchat-reactions__list-items

​
Example: Custom chip styling

App.css
.cometchat-reactions__chip {
  border-radius: 8px;
  border-color: var(--cometchat-border-color-default);
}

.cometchat-reactions__chip--active {
  background: var(--cometchat-extended-primary-color-200);
}

​
Props

All props are optional unless noted otherwise.

​
message

The SDK message object to show reactions for. Required.
TypeCometChat.BaseMessage
Default—

​
alignment

Bubble alignment for positioning the overflow popover.
Type'left' | 'right' | 'center'
Default'left'

​
reactionsRequestBuilder

Custom request builder for fetching reactor details.
TypeCometChat.ReactionsRequestBuilder
Defaultundefined

​
onReactionClick

Called when a reaction chip is clicked. Parent handles the SDK call.
Type(emoji: string, message: CometChat.BaseMessage) => void
Defaultundefined

​
onReactorClick

Called when a user in the reaction list is clicked.
Type(reaction: CometChat.Reaction, message: CometChat.BaseMessage) => void
Defaultundefined

​
onError

Error callback for reactor detail fetching failures.
Type(error: unknown) => void
Defaultundefined

​
children

Custom sub-components. When omitted, renders the default Bar layout.
TypeReactNode
Default<CometChatReactions.Bar />

​
className

Optional custom CSS class for the root container.
Typestring
Defaultundefined

​
CSS Selectors

TargetSelector
Root.cometchat-reactions
Bar.cometchat-reactions__bar
Chip.cometchat-reactions__chip
Chip (active).cometchat-reactions__chip--active
Chip emoji.cometchat-reactions__chip-emoji
Chip count.cometchat-reactions__chip-count
Overflow button.cometchat-reactions__overflow
Overflow count.cometchat-reactions__overflow-count
Info tooltip.cometchat-reactions__info
Info content.cometchat-reactions__info-content
Info emoji.cometchat-reactions__info-emoji
Info title.cometchat-reactions__info-title
Info description.cometchat-reactions__info-description
Info loading.cometchat-reactions__info-loading
Info error.cometchat-reactions__info-error
List container.cometchat-reactions__list
List tabs.cometchat-reactions__list-tabs
List tab.cometchat-reactions__list-tabs-tab
List tab (active).cometchat-reactions__list-tabs-tab--active
List items.cometchat-reactions__list-items
List item.cometchat-reactions__list-item
List error.cometchat-reactions__list-error
List shimmer.cometchat-reactions__list-shimmer