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

# ReactionsConfiguration

> ReactionsConfiguration — CometChat documentation.

You can modify the Reaction component's properties using the ReactionsConfiguration object. To use a configuration, you simply need to pass it to respective parameter.

The ReactionsConfiguration supports the following properties:

### Configurable Properties

| Name                      | Description                                                                                               |
| ------------------------- | --------------------------------------------------------------------------------------------------------- |
| reactionListConfiguration | An instance of `ReactionListConfiguration` which controls the configuration for the reaction list.        |
| reactionInfoConfiguration | An instance of `ReactionInfoConfiguration` which controls the configuration for the reaction information. |
| reactionClick             | Function to be called when a reaction is clicked. It provides the reaction and message as parameters.     |
| reactionsStyle            | Styling properties and values of the `ReactionsStyle` class which controls the look of the reactions.     |

You can create an instance of `ReactionsConfiguration` and pass it as a property to customize these attributes.

```javascript theme={null}
const reactionsConfig = new ReactionsConfiguration({
    reactionListConfiguration: new ReactionListConfiguration({}),
    reactionInfoConfiguration: new ReactionInfoConfiguration({}),
    reactionClick: (reaction, message) => {
      // Write your custom function here
    },
    reactionsStyle: new ReactionsStyle({})
});
```

## Usage

```javascript theme={null}
    const messagesConfiguration = new MessagesConfiguration({
      messageListConfiguration:new MessageListConfiguration({
        reactionsConfiguration: reactionsConfig
      })
    })
```

```javascript theme={null}
  <cometchat-conversations-with-messages [messagesConfiguration]="messagesConfiguration"  ></cometchat-conversations-with-messages>
```