- Customizable theme, styles, and icons.
- Configurable element and render order.
- Localized emoji annotations.
- Emoji grouping and categorization.
- Multi-word deep search.
- Skin tone palette selector.
- Variation gallery selector.
- Enlarged preview on hover.
- Emoticons and shortcodes.
- Recently and frequently used.
- Virtualized rendering.
- And much more!
- React 16.8+
- Interweave + Emoji
To utilize the emoji picker, import and render the
<EmojiPicker /> component. The picker renders
in place, so any positioning or display toggling should be done manually.
Allow and block lists
Sometimes specific emojis should not be used, like the poop emoji. This can easily be achieved with
blockList prop, which accepts an array of hexcodes.
The inverse, the
allowList prop, can be used for situations where a restricted list of emojis
should only be used. This also accepts an array of hexcodes.
Not sure where to find a hexcode? Dig around Emojibase.
When an emoji is selected (clicked on), we keep a history known as "commonly used", and display a
custom group within the emoji list. This history has two modes, recently used and frequently used,
and can be customized with the
commonMode prop. Selected emojis that fall past the
maxCommonlyUsed prop are trimmed from the history.
recently-used- Tracks selected emojis from most recently selected to oldest.
frequently-used- Tracks selected emojis using a counter, in descending order.
The commonly used feature can be disabled with the
Commonly used emojis are stored in local storage.
This picker is quite customizable, if not the most customizable, when it comes to its visual appearance. Every aspect of the picker can be changed, whether it be the order of elements, hiding or showing elements, the number of emojis to render, and more. I'll try to keep this rather short.
To change the number of visible emojis rendered in the list, define the
To change the default selected group tab or skin tone palette, define the
defaultSkinTone props respectively.
By default, the picker renders elements in the following order: emoji being hovered preview at the
top, followed by the list of emojis, the search bar, and the group tabs. This order can be changed
displayOrder prop, which accepts an array of strings.
To disable one of the elements mentioned previously, pass a
To hide emoticons or shortcodes within the preview, pass the
props. Furthermore, to hide group headers (but still use group tabs), pass
To customize the icons displayed in the group tabs, pass an object of nodes to the
prop. By default the picker uses native emoji but can render React components.
The picker is not styled by default as it allows consumers to easily customize the CSS to match their application. There are 2 approaches to styling the picker, the first by writing CSS that follows the class names provided by Interweave.
The second by writing CSS and passing an object of custom class names to the
classNames prop. This
approach enables non-standard solutions, like CSS modules and CSS-in-JS.
emojiPadding prop is an exception to the CSS pattern, as it pads the emoji button using inline
styles. This is necessary for accurately computing of widths and heights.
Localization is important, and thus, all messages within the picker can be translated with the
messages prop. This prop accepts an object of message keys to translated strings. The list of
available messages can be found here.