Chat UIKit React v2
Chat UIKit React
Chat UIKit
React
Version 2
Sendbird Chat UIKit v2 for React is no longer supported as a new version is released. Check out our latest Chat UIKit v3

Reactions

Copy link

In a group channel with multiple users, reactions become especially useful as a social interaction tool for uninterrupted engagement while chatting. Sendbird UIKit also supports the reactions feature in the framework. UIKit reactions, which are based on the Sendbird Chat SDK’s reactions feature, provide a default emoji set to suit diverse messaging needs. You can also customize the reactions UI just like the global themes.

Note: Currently, UIKit reactions are only available for group channels. Reactions are not supported for open channels and custom message types different from those provided by UIKit.


Implementation guide for reactions

Copy link

Once a client app is connected with Sendbird server, the predefined emoji list can be accessed. A combination of the emoji list and reaction information contained within each message completes the look of the reactions UI.

In order to implement reactions, 2 settings need to be checked beforehand.

  • The application settings for reactions
  • The emojis registered in the application

Components

Copy link

There are 2 ways in which reactions can be expressed by users:

  • Hover over a message and click on the Add reaction button that appears to reveal a full Emoji list
  • Click on an existing reaction in the Emoji reaction box to add a user count to the emoji reaction

Add reaction button

Copy link

The Add reaction button can be accessed either by hovering over a message without a reaction, or finding the button at the end of the Emoji reaction box below the message. Clicking this button fires an onClick event that then calls the Emoji list.

Emoji list

Copy link

The Emoji list displays all emojis registered within an application. Emoji reactions already added to a message by the current user are indicated with a highlighted background color.

Emoji reaction box

Copy link

When a text or file message contains reaction data, this data is displayed below the message in the form of emoji reactions. The count of users who have the added emoji reaction to the message is also marked right next to each emoji reaction. Clicking an emoji in the Emoji reaction box adds or removes the reacted user count.

Tapping on the Add reaction button in the box will reveal the full Emoji list to add different emoji reactions.

Reacted user list

Copy link

Hovering over an emoji in the Emoji reaction box displays a list of users who have reacted to the message with the same emoji.


Customize the reactions UI

Copy link

You can also customize the Reaction UI including emojis. The following 3 functions can come in handy when you customize your UIKit using the emojiContainer. The emojiContainer is provided as a callback parameter of the renderChatItem prop in the Channel component.

import {
    getEmojiCategoriesFromEmojiContainer,
    getAllEmojisFromEmojiContainer,
    getEmojisFromEmojiContainer,
} from 'sendbird-uikit';

getEmojiCategoriesFromEmojiContainer(emojiContainer)
// emojiCategories

getAllEmojisFromEmojiContainer(emojiContainer)
// [...emojiCategory.emojis, ...emojiCategory.emojis, ...emojiCategory.emojis]

getEmojisFromEmojiContainer(emojiContainer, emojiCategoryId)
// emojiCategory.emojis