Reactions - CometChat Docs

AI Integration Quick Reference

{
  "component": "CometChatReactions",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatReactions } from \"@cometchat/chat-uikit-react\";",
  "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" }
    },
    "config": {
      "hoverDebounceTime": { "type": "number", "note": "Debounce (ms) before showing the hover tooltip." }
    }
  },
  "types": {
    "CometChatReactionsRootProps": "Root provider props",
    "CometChatReactionsBarProps": "Reaction chips bar props",
    "CometChatReactionsChipProps": "Single reaction chip props",
    "CometChatReactionsInfoProps": "Hover tooltip 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";

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

Minimal Render

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

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-Component	Purpose
`Root`	Context provider. Receives message and config.
`Bar`	Reaction chips container with `role="group"`. Auto-calculates overflow via ResizeObserver.
`Chip`	Single reaction button with emoji, count, and `aria-pressed`.
`Info`	Hover tooltip showing who reacted with a specific emoji.
`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>

For a standalone reactor list (the full list of who reacted, with tab filtering and pagination), use the dedicated CometChatReactionList component — it is separate from CometChatReactions.

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 provided by the UI Kit.

Key Selectors

Target	Selector
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.


Type	`CometChat.BaseMessage`
Default	—

alignment

Bubble alignment for positioning the overflow popover.


Type	`'left' \| 'right' \| 'center'`
Default	`'left'`

reactionsRequestBuilder

Custom request builder for fetching reactor details.


Type	`CometChat.ReactionsRequestBuilder`
Default	`undefined`

hoverDebounceTime

Debounce delay (in milliseconds) before the hover tooltip (Info) appears when hovering a reaction chip.


Type	`number`
Default	`undefined`

onReactionClick

Called when a reaction chip is clicked. Parent handles the SDK call.


Type	`(emoji: string, message: CometChat.BaseMessage) => void`
Default	`undefined`

onReactorClick

Called when a user in the reaction list is clicked.


Type	`(reaction: CometChat.Reaction, message: CometChat.BaseMessage) => void`
Default	`undefined`

onError

Error callback for reactor detail fetching failures.


Type	`(error: unknown) => void`
Default	`undefined`

children

Custom sub-components. When omitted, renders the default Bar layout.


Type	`ReactNode`
Default	`<CometChatReactions.Bar />`

className

Optional custom CSS class for the root container.


Type	`string`
Default	`undefined`

CSS Selectors

Target	Selector
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`

​Where It Fits

​Minimal Render

​Sub-Components

​Custom Layout

​Actions and Events

​Callback Props

​onReactionClick

​onReactorClick

​onError

​CSS Architecture

​Key Selectors

​Example: Custom chip styling

​Props

​message

​alignment

​reactionsRequestBuilder

​hoverDebounceTime

​onReactionClick

​onReactorClick

​onError

​children

​className

​CSS Selectors

Where It Fits

Minimal Render

Sub-Components

Custom Layout

Actions and Events

Callback Props

onReactionClick

onReactorClick

onError

CSS Architecture

Key Selectors

Example: Custom chip styling

Props

message

alignment

reactionsRequestBuilder

hoverDebounceTime

onReactionClick

onReactorClick

onError

children

className

CSS Selectors