> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-native-development.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Reactions

> Displays emoji reaction chips on message bubbles with hover tooltips, a full reactor list, and overflow handling.

<Accordion title="AI Integration Quick Reference">
  | Field | Value |
  | - | - |
  | Component | `CometChatReactions` |
  | Package | `@cometchat/chat-uikit-react` |
  | Import | `import { CometChatReactions } from "@cometchat/chat-uikit-react";` |
  | CSS root class | `.cometchat-reactions` |
  | Primary output | `onReactionClick: (emoji: string, message: CometChat.BaseMessage) => void` — emits the clicked reaction |
  | Prerequisites | App wrapped in [`CometChatProvider`](/ui-kit/react/cometchat-provider) with valid credentials + a logged-in user |
  | Stitching | Pass the target `message`; wire `onReactionClick` / `onReactorClick` to handle taps |
  | Full props | See [Props](#props) |
</Accordion>

## 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.

<Note>
  **This component is display-only.** It renders reaction chips and tooltips but does **not** call the SDK to add or remove reactions. The **parent owns all reaction SDK calls** — it handles `onReactionClick` (to toggle a reaction via the SDK), supplies `reactionsRequestBuilder`, and passes an updated `message` prop down after each change. In practice the parent is [Message List](/ui-kit/react/components/message-list), which wires these calls for you. For a standalone reactor panel with removal support, use [Reaction List](/ui-kit/react/components/reaction-list).
</Note>

<Info>
  **Live Preview** — interact with the reactions component.

  [Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-misc-reactions--default)
</Info>

<iframe src="https://storybook.cometchat.io/react/iframe.html?id=components-misc-reactions--default&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "100px", border: "1px solid #e0e0e0"}} title="CometChat Reactions — Default" allow="clipboard-write" />

```tsx lines theme={null}
import { CometChatReactions } from "@cometchat/chat-uikit-react";

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

## Minimal Render

```tsx lines theme={null}
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:

```tsx lines theme={null}
<CometChatReactions.Root message={message}>
  <CometChatReactions.Bar maxVisible={5} />
</CometChatReactions.Root>
```

<Note>
  For a standalone reactor list (the full list of who reacted, with tab filtering and pagination), use the dedicated [`CometChatReactionList`](/ui-kit/react/components/reaction-list) component — it is separate from `CometChatReactions`.
</Note>

## 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.

```tsx lines theme={null}
<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.

```tsx lines theme={null}
<CometChatReactions.Root
  message={message}
  onReactorClick={(reaction, msg) => {
    console.log(`Clicked reactor: ${reaction.getReactedBy().getName()}`);
  }}
/>
```

#### onError

Called when an error occurs during reactor detail fetching.

```tsx lines theme={null}
<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

```css lines title="App.css" theme={null}
.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` |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.