Loading…
<EmojiPicker locale="fr" onEmojiSelect={setEmoji} />A panel, not a trigger: put it in a popover, a sheet or a page. The emoji data
comes from emoji.hopla.llc
in the picker's locale on first render and is cached by the browser
afterwards; emojibaseUrl points it at another copy of Emojibase. The kit ships
no copy, so pass the search placeholder and the loading and empty states.
The chat's hover bar opens this same picker behind its "+".
API
| Prop | Type | Default | |
|---|---|---|---|
onEmojiSelect | (emoji: string) => void | required | The emoji picked, as its character. |
autoFocus | boolean | false | Focus the search field on mount, as a popover opened to pick wants. |
emojibaseUrl | string | EMOJIBASE_URL | Where the Emojibase data lives; emoji.hopla.llc by default. |
emptyLabel | string | — | Shown when the search matches nothing. |
loadingLabel | string | — | Shown while the emoji data loads. |
locale | Locale | — | The emoji names' and search's language; the picker's own default otherwise. |
searchPlaceholder | string | — | The search field's placeholder. |
columns | number | 8 | The number of columns in the list. |
emojiVersion | number | — | Which Emoji version (https://emojipedia.org/emoji-versions) to use, to manually control which emojis are visible regardless of the current browser's supported Emoji versions. |
exit | Exit | — | Inside a <Presence>: plays this child's way out before it unmounts. |
resolveEmojiData | EmojiDataResolver | — | Returns emoji data for the current locale, synchronously or asynchronously.
Custom data is used as-is, without version or country-flag filtering.
Delegate to defaultEmojiDataResolver to use Emojibase data. Runs on mount and when locale, emojiVersion, or emojibaseUrl changes.
Changing the function alone doesn't reload data. |
skinTone | SkinTone | — | The skin tone of the emoji picker. |
sticky | boolean | — | Whether the category headers should be sticky. |
Plus the DOM props of the element it renders. Source: emoji-picker/components/emoji-picker.tsx.