Emoji picker · reactions
An emoji picker with search by name or keyword, category tabs that follow the scroll, the recently used first, a remembered skin tone and full keyboard control — as a panel, a button with a popover, or one shared picker opened beside any element (reactions on a list of messages). searchEmoji() drives “:shortcode” completion.
Search by name or word · category tabs follow the scroll · recently used first · skin tone · ← ↑ → ↓ Enter, Esc
Smileys & people
Animals & nature
Food & drink
Activities
Travel & places
Objects
Symbols
Flags
😀:grinning:happy smile
Pick one — it shows here, and goes to the top of “Recently used”.
Reactions on a message · openEmojiPicker(anchor) — one picker for every message
GH
Grace Hopper 10:42
The release notes are up — have a look before the demo 🚀
In a composer · EmojiButton inserts at the caret · type “:ta” for suggestions
Usage
import { EmojiPicker, EmojiButton, openEmojiPicker, searchEmoji, emojiByName } from "./components/emoji.js"; EmojiPicker({ onSelect: (emoji, item) => insert(emoji) }) // inline; item = { e, name, words, cat }EmojiButton({ onSelect: insert, title: "Insert emoji" }) // a button with the picker in a popover // one picker for a list of messages: open it beside the button that was clickedbutton.onclick = (e) => openEmojiPicker(e.currentTarget, { onSelect: react, placement: "top" }); searchEmoji("tad") // [{ e: "🎉", name: "tada", … }] — ":tad" autocomplete in a composeremojiByName("+1") // "👍"