Reaction List

Standalone panel showing who reacted to a message, with emoji tab filtering, pagination, and optimistic removal for the current user.

AI Integration Quick Reference

{
  "component": "CometChatReactionList",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatReactionList } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "description": "Standalone panel showing who reacted to a message, with emoji tab filtering, pagination, and optimistic removal for the current user.",
  "cssRootClass": ".cometchat-reaction-list",
  "primaryOutput": {
    "prop": "onItemClick",
    "type": "(reaction: CometChat.Reaction, message: CometChat.BaseMessage) => void"
  },
  "props": {
    "data": {
      "message": { "type": "CometChat.BaseMessage", "note": "Required. The message to show reactions for." },
      "reactionsRequestBuilder": { "type": "CometChat.ReactionsRequestBuilder" }
    },
    "callbacks": {
      "onItemClick": { "type": "(reaction: CometChat.Reaction, message: CometChat.BaseMessage) => void", "note": "Fires only for current user's reactions (to remove)." },
      "onEmpty": { "type": "() => void", "note": "Fires when all reactions are removed. Parent should close the panel." },
      "onError": { "type": "(error: unknown) => void" }
    }
  },
  "types": {
    "CometChatReactionListRootProps": "Root provider props",
    "CometChatReactionListTabsProps": "Emoji tab bar props",
    "CometChatReactionListItemsProps": "Scrollable reactor list props",
    "CometChatReactionListLoadingStateProps": "Shimmer loading state props",
    "CometChatReactionListErrorStateProps": "Error state props",
    "CometChatReactionListEmptyStateProps": "Empty state props",
    "CometChatReactionListContextValue": "Full context value"
  }
}

Where It Fits

CometChatReactionList is a standalone component — it manages its own state and does not depend on CometChatReactions.Root context. It is distinct from CometChatReactions.List, which is a sub-component of CometChatReactions.

Use CometChatReactionList when you want to show a dedicated panel (e.g., inside a popover or bottom sheet) listing all users who reacted to a message, with tab filtering by emoji and the ability for the current user to remove their own reaction.

The parent component (typically CometChatMessageList) owns the SDK reaction add/remove calls and passes an updated message prop when reactions change.

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

function ReactionPanel({ message, onClose }) {
  return (
    <CometChatReactionList
      message={message}
      onItemClick={(reaction, msg) => {
        // Parent calls SDK to remove the reaction
        CometChat.removeReaction(String(msg.getId()), reaction.getReaction());
      }}
      onEmpty={onClose}
    />
  );
}

Minimal Render

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

function Demo({ message }) {
  return <CometChatReactionList message={message} />;
}

Root CSS class: .cometchat-reaction-list

Sub-Components

CometChatReactionList is a compound component with these sub-components:

Sub-Component	Purpose
Root	Context provider. Receives message and config. Renders default layout when no children.
Tabs	Emoji tab bar — “All” tab plus one tab per unique emoji. Keyboard navigable.
Items	Scrollable list of users who reacted. IntersectionObserver pagination.
LoadingState	Shimmer loading placeholder. Self-hides when not loading.
ErrorState	Error message with retry button. Self-hides when not in error state.
EmptyState	Empty message. Self-hides when not empty.

Custom Layout

Compose sub-components to customize the layout:

<CometChatReactionList.Root message={message} onItemClick={handleRemove}>
  <CometChatReactionList.Tabs />
  <CometChatReactionList.LoadingState />
  <CometChatReactionList.ErrorState />
  <CometChatReactionList.EmptyState />
  <CometChatReactionList.Items />
</CometChatReactionList.Root>

Custom Header

Add a custom header above the tabs:

<CometChatReactionList.Root message={message}>
  <div className="my-header">Reactions</div>
  <CometChatReactionList.Tabs />
  <CometChatReactionList.Items />
</CometChatReactionList.Root>

Actions and Events

Callback Props

onItemClick

Called when a reaction item is clicked. Only fires for the current user’s own reactions — non-current-user items are read-only. The parent should call the SDK to remove the reaction.

<CometChatReactionList
  message={message}
  onItemClick={(reaction, msg) => {
    CometChat.removeReaction(String(msg.getId()), reaction.getReaction())
      .then(() => console.log("Reaction removed"))
      .catch(console.error);
  }}
/>

onEmpty

Called when all reactions are removed (after optimistic removal). The parent should close the panel.

const [showPanel, setShowPanel] = useState(true);

{showPanel && (
  <CometChatReactionList
    message={message}
    onEmpty={() => setShowPanel(false)}
  />
)}

onError

Called when an error occurs during reaction fetching.

<CometChatReactionList
  message={message}
  onError={(error) => console.error("Reaction list error:", error)}
/>

Behavior Details

Emoji Tabs

• “All” tab shows every reactor across all emojis.
• Per-emoji tabs show only reactors for that emoji.
• Tab counts update optimistically when the current user removes a reaction.
• Keyboard navigation: ArrowLeft / ArrowRight to move between tabs, Enter / Space to select.

Reactor Items

• Each item shows: avatar, name (or “You” for the current user), “Click to remove” hint (current user only), and the emoji.
• Current user items: cursor: pointer, tabIndex={0}, clickable via Enter / Space.
• Non-current-user items: cursor: default, tabIndex={-1}, not interactive.

Pagination

Reactions are fetched in pages (default limit: 30). An IntersectionObserver sentinel at the bottom of the list triggers fetchMore() when the user scrolls near the bottom.

Optimistic Removal

When the current user clicks their reaction:

1. The reaction is removed from the list immediately (optimistic update).
2. onItemClick is called so the parent can call the SDK.
3. If no reactions remain, onEmpty is called.

The component does not call the SDK itself — the parent owns that responsibility.

Custom Request Builder

Pass a custom ReactionsRequestBuilder to control the fetch limit or other parameters:

import { CometChat } from "@cometchat/chat-sdk-javascript";

const builder = new CometChat.ReactionsRequestBuilder().setLimit(50);

<CometChatReactionList
  message={message}
  reactionsRequestBuilder={builder}
/>

CSS Architecture

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

Key Selectors

Target	Selector
Root	.cometchat-reaction-list
Tabs bar	.cometchat-reaction-list__tabs
Tab button	.cometchat-reaction-list__tabs-tab
Tab (active)	.cometchat-reaction-list__tabs-tab--active
Tab emoji	.cometchat-reaction-list__tabs-tab-emoji
Tab emoji (active)	.cometchat-reaction-list__tabs-tab-emoji--active
Tab count	.cometchat-reaction-list__tabs-tab-count
Tab count (active)	.cometchat-reaction-list__tabs-tab-count--active
Items list	.cometchat-reaction-list__list
List item	.cometchat-reaction-list__list-item
Item (current user)	.cometchat-reaction-list__list-item--current-user
Item (read-only)	.cometchat-reaction-list__list-item--readonly
Item avatar	.cometchat-reaction-list__item-avatar
Item name	.cometchat-reaction-list__item-name
Item hint	.cometchat-reaction-list__item-hint
Item emoji	.cometchat-reaction-list__item-emoji
Shimmer	.cometchat-reaction-list__shimmer
Error	.cometchat-reaction-list__error
Retry button	.cometchat-reaction-list__retry-button
Empty	.cometchat-reaction-list__empty
Loading more	.cometchat-reaction-list__loading-more
Spinner	.cometchat-reaction-list__spinner

Example: Custom styling

App.css

/* Wider panel */
.cometchat-reaction-list {
  width: 320px;
}

/* Custom active tab color */
.cometchat-reaction-list__tabs-tab--active {
  border-bottom-color: var(--my-brand-color);
}

.cometchat-reaction-list__tabs-tab-emoji--active,
.cometchat-reaction-list__tabs-tab-count--active {
  color: var(--my-brand-color);
}

Props

All props are optional unless noted otherwise.

---

message

The SDK message object to show reactions for. Required.

Type	CometChat.BaseMessage
Default	—

---

reactionsRequestBuilder

Custom request builder for fetching reactor details. Controls limit and other fetch parameters.

Type	CometChat.ReactionsRequestBuilder
Default	new CometChat.ReactionsRequestBuilder().setLimit(30)

---

onItemClick

Called when the current user clicks their own reaction item (to remove it). Not called for other users’ reactions.

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

---

onEmpty

Called when all reactions are removed. The parent should close the panel.

Type	() => void
Default	undefined

---

onError

Error callback for reaction fetching failures.

Type	(error: unknown) => void
Default	undefined

---

children

Custom sub-components. When omitted, renders the default layout (Tabs + LoadingState + ErrorState + EmptyState + Items).

Type	ReactNode
Default	Default layout

---

className

Optional custom CSS class for the root container.

Type	string
Default	undefined

Accessibility

• Root has role="dialog" and aria-label="Reaction list".
• Tab bar has role="tablist" with aria-label="Reaction filters".
• Each tab has role="tab" and aria-selected.
• Items container has role="list" with a descriptive aria-label.
• Each item has role="listitem" and aria-label describing the user, emoji, and hint.
• Current user items have tabIndex={0} and respond to Enter / Space.
• Read-only items have tabIndex={-1}.
• All interactive elements have :focus-visible styles.
• Shimmer respects prefers-reduced-motion.
• Spinner respects prefers-reduced-motion.
• High contrast mode supported via @media (prefers-contrast: high).