Emoji Picker
An emoji picker with search, skin tones, recently used emoji, custom emoji and a virtualized grid.
Overview
<EmojiPicker /> alone renders a trigger and a popover. Compose EmojiPickerTrigger + EmojiPickerContent, or EmojiPickerPanel in place, from EmojiPickerSearch, EmojiPickerCategories, EmojiPickerList, EmojiPickerPreview and EmojiPickerSkinTone.
- Search: names, keywords and shortcodes.
- Categories: a category bar that follows the scroll, plus a frequently or recently used section.
- Data: emojibase, fetched once per page from jsDelivr (
dataUrlto self-host,localefor 28 languages) or passed asdata.emojiVersion="auto"hides emoji the device can't draw. - Value:
value/defaultValue/onChangehold the native emoji (or:shortcode:for a custom one).selectionMode="multiple"toggles a list (withmax), andonEmojiSelectfires on every pick, for inserting into text. - Keyboard: focus stays in the search while the arrows move through the grid (a combobox over an
aria-activedescendantlistbox); Enter picks. - Persistence: recent picks and the tone persist in localStorage (
recentStorageKey,skinToneStorageKey;nullkeeps them in memory). - Forms:
namesubmits with a native form.
Every string comes from i18n.
Installation
CLI
Manual
- 1
Register the @fma-ds namespace in components.json (once)
- 2
Add the item
Files land in
components/fma-ds/emoji-picker.tsx; npm and registry dependencies are installed along with them.
Dependencies
- npm
- cn@^0.5.0lucide-react@^1.61.0react-aria-components@^1.22.1