Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProAn emoji picker with search, category filters, a Recent row, a skin tone choice that applies to the emoji that support it and a grid you move through with all four arrow keys. Use this when people add emoji to a status, a name or a message.
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.
Use it for statuses, reactions with free choice, channel icons and any field where a person picks one emoji from several hundred.
Do not use it when there are fewer than a dozen reactions. Use a ring or a row of buttons.
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.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | The chosen emoji (controlled). |
defaultValue | string | "" | Initial emoji. |
onValueChange | (emoji: string, name: string) => void | - | Runs when an emoji is picked (skin tone applied). |
emoji | { char, name, category, tone? }[] | 60 emoji | The set; tone marks emoji that take a skin tone. |
recent | string[] | - | Recently used emoji (controlled). |
onRecentChange | (recent: string[]) => void | - | Runs with the new list after a pick. |
columns | number | 8 | Emoji per row. |
listbox of options in one tab stop with roving focus; Left/Right move by one, Up/Down by a whole row.waving hand, medium skin tone).The pattern ships with a Testing Library test (emoji-picker-grid-search.test.tsx) that covers search, categories, grid navigation, applying a skin tone and recents.