# Emoji Picker

The SDK includes an `EmojiPicker` built on [`emoji-mart`](https://github.com/missive/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](https://getstream.io/chat/docs/sdk/react/guides/emoji-picker/#basic-usage).

![Default Emoji Picker](https://getstream.io/docs-assets/images/133a742147f1.png)

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

```tsx
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:

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

Register the picker through `WithComponents`:

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

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

| Prop                       | Description                                                                                                                                                                               | Type                                                                        |
| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
| `buttonClassName`          | Class name for the open/close button. Defaults to `str-chat__emoji-picker-button`.                                                                                                        | `string`                                                                    |
| `ButtonIconComponent`      | Icon component rendered inside the open/close button. Defaults to [`IconEmoji`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Icons/icons.tsx).               | `React.ComponentType`                                                       |
| `closeOnEmojiSelect`       | Whether the picker closes after selecting an emoji. Defaults to `false`.                                                                                                                  | `boolean`                                                                   |
| `pickerContainerClassName` | Class name for the picker container. Defaults to `str-chat__message-textarea-emoji-picker-container`.                                                                                     | `string`                                                                    |
| `pickerProps`              | Untyped [properties](https://github.com/missive/emoji-mart/tree/v5.5.2#options--props) forwarded to the [emoji-mart `Picker`](https://github.com/missive/emoji-mart/tree/v5.5.2#-picker). | `Partial<{ theme: 'auto' \| 'light' \| 'dark' } & Record<string, unknown>>` |
| `placement`                | Floating UI placement for the picker popover. Defaults to `"top-end"`.                                                                                                                    | `PopperLikePlacement`                                                       |
| `wrapperClassName`         | Class name for the wrapper element. Defaults to `str-chat__message-textarea-emoji-picker`.                                                                                                | `string`                                                                    |

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/components/message-composer/emoji-picker/](https://getstream.io/chat/docs/sdk/react/components/message-composer/emoji-picker/).