# Emoji Picker

> **Info:** This is release candidate documentation for **Stream Chat React SDK v15**. For the latest stable version, see the [latest version (v14)](https://getstream.io/chat/docs/sdk/react/).

`EmojiPicker` is a button after the composer's input that opens an [emoji-mart](https://github.com/missive/emoji-mart) picker in a popover. Picking an emoji inserts it at the cursor. It comes from the `stream-chat-react/emojis` entry point and is off by default: it renders only when registered as the `EmojiPicker` override. [Emoji](https://getstream.io/chat/docs/sdk/react/v15/features/rich-content/emoji/) explains the picker and `:shortcode` autocomplete.

## Best practices

- Install `emoji-mart` and `@emoji-mart/data`, and import `emoji-picker.css`, before you register the picker. See [Setup](#setup).
- Register it with `WithComponents`. The `EmojiPicker` key gets no props, so to set props, register a component that renders `EmojiPicker` with them.
- Render it inside `MessageComposer`. It reads `MessageComposerContext`, and throws outside it.
- The picker doesn't turn on autocomplete. For `:shortcode` suggestions, add the emoji middleware; see [Emoji](https://getstream.io/chat/docs/sdk/react/v15/features/rich-content/emoji/#turning-it-on-or-off). The `emojiSearchIndex` prop of `MessageComposer` doesn't do it either.

## Props

| Prop                       | Type                                                                        | Default                                               | Description                                                                                                                                                                       |
| -------------------------- | --------------------------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `buttonClassName`          | `string`                                                                    | `"str-chat__emoji-picker-button"`                     | Class name of the button. Replaces the default.                                                                                                                                   |
| `ButtonIconComponent`      | `React.ComponentType`                                                       | the `IconEmoji` icon                                  | The icon inside the button, for this picker only. To change the icon everywhere, override the `IconEmoji` icon.                                                                   |
| `closeOnEmojiSelect`       | `boolean`                                                                   | `false`                                               | Closes the popover after an emoji is picked.                                                                                                                                      |
| `pickerContainerClassName` | `string`                                                                    | `"str-chat__message-textarea-emoji-picker-container"` | Class name of the popover. Replaces the default.                                                                                                                                  |
| `pickerProps`              | `Partial<{ theme: "auto" \| "light" \| "dark" } & Record<string, unknown>>` | none                                                  | Passed on to emoji-mart's `Picker`. Its [options](https://github.com/missive/emoji-mart#options--props) list what it can hold. `data` and `onEmojiSelect` here replace the SDK's. |
| `placement`                | `PopperLikePlacement`                                                       | `"top-end"`                                           | Where the popover opens, relative to the button.                                                                                                                                  |
| `wrapperClassName`         | `string`                                                                    | `"str-chat__message-textarea-emoji-picker"`           | Class name of the element around the button and the popover. Replaces the default.                                                                                                |

The button is disabled during a slow-mode cooldown, and the default layout doesn't render the picker then. The popover closes when the user clicks outside it. The picker loads its data from `@emoji-mart/data` the first time it opens.

`EmojiPickerProps` is exported from `stream-chat-react/emojis`.

## Setup

1. Install the picker's dependencies. They're optional peer dependencies of `stream-chat-react`:

   ```bash
   npm install emoji-mart @emoji-mart/data
   ```

2. Import the picker's stylesheet after the main one:

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

   If your app puts the SDK's CSS in a cascade layer, import this one into a layer too:

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

3. Register the picker, here with props:

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

   const ComposerEmojiPicker = () => (
     <EmojiPicker closeOnEmojiSelect pickerProps={{ theme: "light" }} />
   );

   const overrides = { EmojiPicker: ComposerEmojiPicker };

   export const WithEmojiPicker = ({ children }: PropsWithChildren) => (
     <WithComponents overrides={overrides}>{children}</WithComponents>
   );
   ```

   `AdditionalMessageComposerActions`, the area after the input, renders the picker. To use it with no props, register `EmojiPicker` itself: `overrides={{ EmojiPicker }}`.

[Entry points and CSS files](https://getstream.io/chat/docs/sdk/react/v15/reference/entry-points-and-css-files/) lists the `emojis` entry point and the stylesheets.

## Hooks and helpers

`stream-chat-react/emojis` also exports `createTextComposerEmojiMiddleware(searchIndex, options?)`, the text composer middleware behind `:shortcode` autocomplete. [Emoji](https://getstream.io/chat/docs/sdk/react/v15/features/rich-content/emoji/#turning-it-on-or-off) shows how to add it.

---

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