Skip to main content Skip to filter input Primer

EmojiAutocomplete

Emoji autocompletion provider.

React

draft

Docs|Storybook|Source

Props

EmojiAutocomplete

Name	Default	Description
onSelectSuggestion		`(event: SelectSuggestionsEvent) => void` Called when a suggestion is selected.
tabInsertsSuggestions	`false`	`boolean` If `true`, suggestions will be applied with both `Tab` and `Enter`, instead of just `Enter`. This may be expected behavior for users used to IDEs, but use caution when hijacking browser tabbing capability.
style		`Omit<React.CSSProperties, "position">` The `AutocompleteTextarea` has a container for positioning the suggestions overlay. This can break some layouts (ie, if the editor must expand with `flex: 1` to fill space) so you can override container styles here. Usually this should not be necessary. `position` may not be overridden.
children Required		`TextInputCompatibleChild` An `input` or `textarea` compatible component to extend. A compatible component is any component that forwards a ref and props to an underlying `input` or `textarea` element, including but not limited to `Input`, `TextArea`, `input`, `textarea`, `styled.input`, and `styled.textarea`. If the child is not compatible, a runtime `TypeError` will be thrown.
suggestionsPlacement	`"below"`	`SuggestionsPlacement` Control which side of the insertion point the suggestions list appears on by default. This should almost always be `"below"` because it typically provides a better user experience (the most-relevant suggestions will appear closest to the text). However, if the input is always near the bottom of the screen (ie, a chat composition form), it may be better to display the suggestions above the input. In either case, if there is not enough room to display the suggestions in the default direction, the suggestions will appear in the other direction.
portalName		`string` The name of the portal to render the suggestions overlay into. This is useful if you have multiple inline autocomplete components on the same page and you want to ensure the suggestions overlay is rendered in the correct order.
fullWidth		`boolean` If `true`, the input will be rendered as a block element, taking up the full width of its container. This is useful for rendering the input in a `flex` container, for example.
title		`string` Optional title/name for the suggestions menu.
asMenu		`boolean` For simple cases, the standard representation of this widget is as a `listbox` tied to a `combobox`. For more advanced cases (such as multistep menus or if items need to perform side effects), the widget can instead be represented as a `menu` tied to a plain `textbox`.
tone		`number`