Emoji Picker

The SDK includes an EmojiPicker built on emoji-mart. It’s disabled by default. To enable it, install the emoji-mart packages, import the dedicated picker stylesheet, and register EmojiPicker through WithComponents. See the Basic Usage section.

Best Practices

• Enable the picker only when emoji usage is a core part of your UX.
• Import the dedicated picker stylesheet when you use the SDK EmojiPicker.
• Keep picker placement aligned with your app’s z-index and overflow rules.
• Set closeOnEmojiSelect based on input density and user flow.
• Avoid heavy picker props that slow input responsiveness.
• Ensure emoji fonts render consistently across platforms.

Props

Setup

When you use the SDK picker, import its standalone stylesheet in addition to the main chat styles:

import "stream-chat-react/dist/css/index.css";
import "stream-chat-react/dist/css/emoji-picker.css";

If your app uses CSS layers, import the picker stylesheet into the same layer strategy as your other chat styles:

@import url("stream-chat-react/dist/css/emoji-picker.css") layer(stream-plugins);

Register the picker through WithComponents:

import { Channel, WithComponents } from "stream-chat-react";
import { EmojiPicker } from "stream-chat-react/emojis";

<WithComponents overrides={{ EmojiPicker }}>
  <Channel>{/* ... */}</Channel>
</WithComponents>;