Emoji Picker

EmojiPicker is a button after the composer's input that opens an 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 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.
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. 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 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

Install the picker's dependencies. They're optional peer dependencies of stream-chat-react:
```
npm install emoji-mart @emoji-mart/data
```

Import the picker's stylesheet after the main one:

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:

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

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 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 shows how to add it.