> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.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-rn-guide-message-privately/ugckbRl5Q-H7t8X2/images/e29249e6-reactions-web-9089317d4f276e0be47a8d4b7815bc1d.png?fit=max&auto=format&n=ugckbRl5Q-H7t8X2&q=85&s=b29cf60a9e07e454adce7a14fef46850" 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.       |