Message reactions (emojis) for PubNub Chat Components for React

Migrate to Chat SDK

PubNub will stop supporting Chat Components on January 1, 2025 but you are welcome to contribute. Learn how to migrate to the Chat SDK here.

The following components interact with emoji pickers:

• Message Input uses emojis to compose text messages.
• Message List uses emojis to react to text messages.

To keep the components library lightweight and provide maximum customizability, an emoji picker component is not included directly in the package. Instead, it's expected to be installed directly in your application and provided into react-chat-components using render props.

Interface

To use any emoji picker component of your choosing, it has to expose the onEmojiSelect() method which is called whenever an emoji is picked by the user. In that method, you must provide a single object argument which has a native property that returns a native emoji image that can be rendered by your app's supported browser.

A TypeScript interface that you can import from the components looks like this:

interface EmojiPickerElementProps {
  onEmojiSelect?: ({ native: string }) => void;
}

emoji-mart

emoji-mart is a popular, customizable emoji picker component for React that is natively supported by PubNub Chat Components for React. It uses the same interface so the usage is plug-and-play.

1. Start by installing the package.

   npm install --save emoji-mart @emoji-mart/data @emoji-mart/react

2. Import the component and required styles.

   import emojiData from "@emoji-mart/data";
   import { Picker } from "@emoji-mart/react";

3. Use it in your chat app.

   <Chat channel="test-channel">
     <MessageList enableReactions reactionsPicker={<Picker data={emojiData} />} />
     <MessageInput typingIndicator emojiPicker={<Picker data={emojiData} />} />
   </Chat>

emoji-picker-react

emoji-picker-react is another popular choice to provide emoji picking functionality. However, it uses a different interface so you have to write an adapter before rendering it in the components.

1. Start by installing the package.

   npm install --save emoji-picker-react

2. Import the component (and a helpful interface if you are using TypeScript).

   import Picker, { IEmojiData } from "emoji-picker-react";
   import { EmojiPickerElementProps } from "@pubnub/react-chat-components";

3. Implement an adapter.

   export const PickerAdapter = (props: EmojiPickerElementProps) => {
   // handling method should call onEmojiSelect with an object exposing the "native" property
   const handleEmoji = (event: React.MouseEvent, emoji: IEmojiData) => {
       if (props.onEmojiSelect) props.onEmojiSelect({ native: emoji.emoji });
   };
   // onEmojiClick is a method in emoji-picker-react used to handle emoji picking
   return <Picker onEmojiClick={handleEmoji} />;
   };

4. Use it in your chat app.

   <Chat channel="test-channel">
     <MessageList enableReactions reactionsPicker={<PickerAdapter />} />
     <MessageInput typingIndicator emojiPicker={<PickerAdapter />} />
   </Chat>