Emoji Picker

This guide shows how to add EmojiPicker to your chat app—no chat experience is complete without emojis.

Best Practices

Use the SDK EmojiPicker for the quickest and most consistent setup.
Keep the picker lightweight to avoid input latency.
Return focus to the textarea after emoji insertion.
Hide the picker on selection if your UI is compact.
Verify emoji rendering across platforms and fonts.

Prerequisites

EmojiPicker is built on emoji-mart. Start by installing the required packages (make sure they meet our peer dependency requirements):

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

Basic Usage

The SDK EmojiPicker includes both the button and picker UI and manages its own 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, you can build your own. Here’s a simple example using native emojis:

import { useState } from "react";
import { useMessageInputContext, useMessageComposer } from "stream-chat-react";

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

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

  const { textComposer } = useMessageComposer();
  const { 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={() => {
                textComposer.insertText({ text: emoji });
                textareaRef.current?.focus(); // returns focus back to the message input element
              }}
            >
              {emoji}
            </button>
          ))}
        </div>
      )}

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

Preview of the custom EmojiPicker component

Thread Header

App Menu