Emoji Picker

In this guide we'll show you how to add EmojiPicker component to your chat application as no chat experience is complete without emojis.

Prerequisities

Our EmojiPicker is built on top of emoji-mart so let's begin with installing emoji-mart-related packages (make sure they meet our peer-dependency requirements):

yarn add emoji-mart @emoji-mart/data @emoji-mart/react

Basic Usage

The SDK EmojiPicker carries both button and the actual picker components and owns its "open" state.

import { Channel } from 'stream-chat-react';
import { EmojiPicker } from 'stream-chat-react/emojis';

const WrappedChannel = ({ children }) => {
  return <Channel EmojiPicker={EmojiPicker}>{children}</Channel>;
};

Building custom EmojiPicker component

If emoji-mart is too heavy for your use-case and you'd like to build your own you can certainly do so, here's a very simple EmojiPicker example built using native emojis:

import { useMessageInputContext } from 'stream-chat-react';

const emojis = ['🍳', '🥐', '🥓', '🧇', '🥞', '🍩'];

export const CustomEmojiPicker = () => {
  const [open, setOpen] = useState(false);

  const { insertText, textareaRef } = useMessageInputContext('CustomEmojiPicker');

  return (
    <div
      id='emoji-picker'
      style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' }}
    >
      {open && (
        <div
          style={{ position: 'absolute', top: '-20px', background: 'orangered', padding: '2px' }}
        >
          {emojis.map((emoji) => (
            <button
              key={emoji}
              onClick={() => {
                insertText(emoji);
                textareaRef.current?.focus(); // returns focus back to the message input element
              }}
            >
              {emoji}
            </button>
          ))}
        </div>
      )}

      <button onClick={() => setOpen((isOpen) => !isOpen)}>🍴</button>
    </div>
  );
};