WUI logo


Allow user to select predefined cute emojis 😍




yarn add @welcome-ui/emoji-picker


import { EmojiPicker, useEmojiPicker } from '@welcome-ui/emoji-picker'

About #

EmojiPicker is a form element that extends Popover and react-window to efficiently render large lists of images.

It takes value and onChange props, its value being an emoji wrapped with a colon, using the same pattern as Slack. The data is from emoji-data.

Usage #

The most basic emoji picker needs useEmojiPicker(), <EmojiPicker.Trigger /> and <EmojiPicker />. It will show a predefined list of emojis

Default value #

<EmojiPicker /> being a form element, you can set a value prop that will show the correct emoji on open.

Tabs #

<EmojiPicker /> can take multiple children that have to be instances of <EmojiPicker.Tab />. They have a name prop, which will be used for the content of the tab; their children will be the wrapped in < Tab.Panel />. <EmojiPicker /> also takes a defaultTabStore prop that will be passed to useTab and can be useful to choose a default tab, for instance.

Custom list #

You can use your own custom <EmojiList /> with an emojis props with the following format:

"alias": "grinning", // Required, the value of the emoji (not wrapped with :), if from basicEmojis.json, will use the apple/google emoji
"category": "Smileys & Emotion", // Needed to sort the emojis by categories
"url": "https://example.com/image.png", // If present, will be used instead of the alias to show the emojis
"some-other-key": "happy" // Any other field will be used for the search

All the field, with the expection of url, will be used for the search.

BasicList #

When using <EmojiPicker /> witjout children, it will automatically add <EmojiPicker.BasicList /> as its children, if you want to add custom tabs, you need to add it back.

i18n #

You can set some props on <EmojiPicker /> & <EmojiPicker.List /> to change some labels.

useEmojiPicker #

We use usePopover from Popover.

Pass options to useEmojiPicker :

  • defaultOpen: e.g. const emojiPicker = useEmojiPicker({ defaultOpen: true })

Properties #

EmojiPicker #
(emoji: EmojiData) => void
EmojiPicker.List #

No props specified

Packages #

Dependencies #
Peer dependencies #