The EmojiPicker component provides a user with a default selection of emojis to choose from. An onSelect function will be called whenever an emoji is selected from the picker.

For more information on how to use the features and props for this component, check out the developer documentation.

A footer may optionally be added to an EmojiPicker by passing the showFooter property. The footer includes a color picker to customize the skin tone of relevant emojis. You may also adjust the emojiSize in pixels and the number of emojis displayed perLine within the input.

Excluding categories

Sets can also be filtered to exclude certain categories of emojis. In the following demo, all emojis from the recent, people, foods, activity, and flags categories are excluded.

Other sets of emojis can be used within the EmojiPicker by providing custom sets to the wrapping EmojiContext.Provider. The following demo applies a custom emoji set from Google.

classNamestringAdditional CSS classes.
emojiSizenumberIndividual emojis size in pixels.
excludeCategoryName[]Don't load excluded categories. Accepts I18n categories keys.
onSelectA Fn that gets called on selecting an emoji from picker.
perLinenumberNumber of emoji per line in a picker.
refRef<HTMLDivElement>Ref for the emoji Picker
showFooterbooleanShow footer for picker.