Emoji Shortcode Autocomplete

ProNew

A message box where typing a colon and two letters lists matching emoji with their shortcodes, inserts the character, and also turns a fully typed :smile: into the emoji. Use this when people write messages with emoji from the keyboard.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

value

defaultValue

minChars2

Guide and examples

When to use it

Use it in chat, comments and status fields where reaching for an emoji picker interrupts typing, and :tada: is faster than any picker.

Do not use it when emoji are only chosen as reactions. Use a reaction picker.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`emoji`	`{ char, name, keywords? }[]`	40 common emoji	The dictionary. `name` is the shortcode without colons.
`value`	`string`	-	The text (controlled).
`defaultValue`	`string`	`""`	Initial text.
`onValueChange`	`(value: string) => void`	-	Runs on every change.
`minChars`	`number`	`2`	Letters needed after the colon.

Accessibility

The list opens only after a colon that follows a space or the start of the text, so times such as 10:30 do not open it.
Each option's accessible name is the shortcode and a description (tada, party popper); the glyph is aria-hidden.
A fully typed :name: is replaced by the emoji when the closing colon is typed, if name is known.
Unknown shortcodes are left as typed.

Testing

The pattern ships with a Testing Library test (emoji-shortcode-autocomplete.test.tsx) that covers the list after the minimum, inserting, converting a complete shortcode and not opening for times.

Guide and examples

When to use it

Use it in chat, comments and status fields where reaching for an emoji picker interrupts typing, and :tada: is faster than any picker.

Do not use it when emoji are only chosen as reactions. Use a reaction picker.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`emoji`	`{ char, name, keywords? }[]`	40 common emoji	The dictionary. `name` is the shortcode without colons.
`value`	`string`	-	The text (controlled).
`defaultValue`	`string`	`""`	Initial text.
`onValueChange`	`(value: string) => void`	-	Runs on every change.
`minChars`	`number`	`2`	Letters needed after the colon.

Accessibility

The list opens only after a colon that follows a space or the start of the text, so times such as 10:30 do not open it.
Each option's accessible name is the shortcode and a description (tada, party popper); the glyph is aria-hidden.
A fully typed :name: is replaced by the emoji when the closing colon is typed, if name is known.
Unknown shortcodes are left as typed.

Testing

The pattern ships with a Testing Library test (emoji-shortcode-autocomplete.test.tsx) that covers the list after the minimum, inserting, converting a complete shortcode and not opening for times.