Emoji Picker

A composable emoji picker component.

Component Source llms.txt

Installation

jsrepo add ui/emoji-picker

Usage

Default Skin

Popover

Footer

Recents

You can show a list of recently used emojis by passing the showRecents prop.

The list is sorted by frecency meaning emojis used more are at the top and 2 emojis with the same amount of uses will be sorted by the last time they were used.

Pick an emoji to add it to your recents.

Acknowledgements

The API and style of this component takes inspiration from Frimousse.

API Reference

EmojiPicker.

Root

The root component of the emoji picker.

PropTypeDefault
skin? $bindable
enum 0
onSelect?
function -
onSkinChange?
function -
showRecents?
boolean -
recentsKey?
string -
maxRecents?
number -
children?
Snippet -
EmojiPicker.

List

Displays the list of emojis.

PropTypeDefault
emptyMessage?
string No results.
EmojiPicker.

Viewport

The viewport container for the emoji picker.

EmojiPicker.

The search input for filtering emojis.

EmojiPicker.

The footer area of the emoji picker.

PropTypeDefault
children?
Snippet -
EmojiPicker.

SkinToneSelector

A button for selecting the emoji skin tone.

PropTypeDefault
previewEmoji?
string 👋