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

# Reactions

> Reactions — CometChat documentation.

The `CometChatReactions` component is used to display a list of reactions to a specific message. Users can see who has reacted to the message and with what emoji.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/l_1oaiAY9g221I2G/images/e29249e6-reactions-web-9089317d4f276e0be47a8d4b7815bc1d.png?fit=max&auto=format&n=l_1oaiAY9g221I2G&q=85&s=b11a8034e8d1b88c1eef6333a4d66845" width="338" height="170" data-path="images/e29249e6-reactions-web-9089317d4f276e0be47a8d4b7815bc1d.png" />
</Frame>

## Properties

| Properties | Type | Description |
| - | - | - |
| `messageObject` | CometChat.BaseMessage | The message to display reactions for. |
| `reactionsStyle` | ReactionsStyle | The style for the reactions component. |
| `alignment` | MessageBubbleAlignment | The alignment of the reactions component. |
| `reactionListConfiguration` | ReactionListConfiguration | The configuration for the reaction list. |
| `reactionInfoConfiguration` | ReactionInfoConfiguration | The configuration for the reaction information. |
| `hoverDebounceTime` | number | The delay before the hover effect is applied. |
| `reactionClick` | Function | The function to call when a reaction is clicked. |

## Usage

```html theme={null}
<cometchat-reactions
  messageObject={messageObject}
  reactionsStyle={reactionsStyle}
  alignment={alignment}
  reactionListConfiguration={reactionListConfiguration}
  reactionInfoConfiguration={reactionInfoConfiguration}
  hoverDebounceTime={hoverDebounceTime}
  reactionClick={reactionClick}
/>
```

## ReactionsStyle

`ReactionsStyle` is a class containing attributes to customize the appearance of the `CometChatReactions` component.

| Attributes | Type | Description |
| - | - | - |
| `height` | string | The height of the reactions component. |
| `width` | string | The width of the reactions component. |
| `borderRadius` | string | The border radius of the reactions component. |
| `border` | string | The border of the reactions component. |
| `background` | string | The background color of the reactions component. |
| `reactionBoxShadow` | string | The box shadow of the reaction. |
| `barPadding` | string | The padding of the reaction bar. |
| `reactionBorderRadius` | string | The border radius of the reaction. |
| `reactionBackground` | string | The background color of the reaction. |
| `activeReactionBorder` | string | The border of the active reaction. |
| `activeReactionBackground` | string | The background color of the active reaction. |
| `reactionEmojiFont` | string | The font of the reaction emoji. |
| `reactionEmojiFontColor` | string | The font color of the reaction emoji. |
| `reactionCountTextFont` | string | The font of the reaction count text. |
| `reactionCountTextColor` | string | The color of the reaction count text. |
| `baseReactionBackground` | string | The base background color of the reaction. |


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