This is documentation for Stream Chat React SDK v11, which is no longer actively maintained. For up-to-date documentation, see the latest version (v12).

Emoji Picker

The SDK comes with the EmojiPicker component which is built on top of the emoji-mart and is disabled by default but can be easily enabled by installing emoji-mart related packages, importing the component from stream-chat-react/emojis and forwarding it to the Channel component, see the Basic Usage section of the customization guide for more information.

Default Emoji Picker

Props

ButtonIconComponent

The icon component to be rendered within open/close button.

TypeDefault
React.ComponentTypeEmojiPickerIcon

buttonClassName

The className to be used in the open/close button instead of the default one.

TypeDefault
string’str-chat__emoji-picker-button’

pickerContainerClassName

The className to be used in the picker container element instead of the default one.

TypeDefault
string’str-chat__message-textarea-emoji-picker-container’

wrapperClassName

The className to be used in the wrapper element of the whole component instead of the default one.

TypeDefault
string’str-chat__message-textarea-emoji-picker’

closeOnEmojiSelect

The flag which specifies whether the emoji picker component should close after an emoji has been selected.

TypeDefault
booleanfalse

pickerProps

Untyped properties to be passed down to the emoji-mart Picker component.

Type
Partial<{ theme: ‘auto’ | ‘light’ | ‘dark’ } & Record<string, unknown>>

popperOptions

React Popper options to be passed down to the react-popper usePopper hook.

Type
Partial<Options>
© Getstream.io, Inc. All Rights Reserved.