# 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](https://github.com/GetStream/stream-chat-react/blob/v11.0.0/package.json#L97-L99)):

```bash
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.

```tsx
import { Channel } from "stream-chat-react";
import { EmojiPicker } from "stream-chat-react/emojis";

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

![Default EmojiPicker Component](@chat-sdk/react/v13/_assets/default-emoji-picker.png)

## 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:

```tsx
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](@chat-sdk/react/v13/_assets/custom-emoji-picker.png)


---

This page was last updated at 2026-04-21T07:55:47.955Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v13/guides/customization/emoji_picker/](https://getstream.io/chat/docs/sdk/react/v13/guides/customization/emoji_picker/).