Emoji Picker React (v4)

An emoji picker component for React applications.

Try it live

What to know before using

• This package assumes it runs in the browser. I have taken many steps to prevent it from failing on the server, but still, it is recommended to only render the component on the client.

Installation

npm install emoji-picker-react

Features

• Custom click handler
• Dark mode
• Customizable styles via css variables
• Default skin tone selection
• Skin tone change
• Different emoji sets (Google, Apple, Facebook, Twitter)
• Native Emoji support

Config Props

• onEmojiClick (event: MouseEvent, emoji: EmojiClickData) => void - Callback function when an emoji is clicked. The callback receives the event and the emoji data. The emoji data is comprised of the following properties:

  activeSkinTone: SkinTones;
  unified: string;
  unifiedWithoutSkinTone: string;
  emoji: string;
  names: string[];
  getImageUrl: (emojiStyle: EmojiStyle) => string;
  }

• theme Theme - The theme of the picker. Can be either light or dark. Default is light. The Theme enum can be imported from the package.

  import { Theme } from 'emoji-picker-react';

• emojiStyle EmojiStyle - The emoji style to use. Can be either apple, google, facebook, twitter or native. Default is apple. The EmojiStyle enum can be imported from the package.

  import { EmojiStyle } from 'emoji-picker-react';

• autoFocusSearch: boolean - Whether to focus the search input on mount. Defaults to true.

• defaultSkinTone: SkinTones - The default skin tone to use when an emoji is clicked. Defaults to SkinTones.Neutral. Possible skin tones are:

  ✋ NEUTRAL = 'neutral'
  ✋🏻 LIGHT = '1f3fb'
  ✋🏼 MEDIUM_LIGHT = '1f3fc'
  ✋🏽 MEDIUM = '1f3fd'
  ✋🏾 MEDIUM_DARK = '1f3fe'
  ✋🏿 DARK = '1f3ff'

The skin tones typescript enum can be imported directly from the package:

import { SkinTones } from 'emoji-picker-react';

• skinTonesDisabled: boolean - Whether to disable the skin tone selection. Defaults to false.

• showPreview: boolean - Whether to show the preview of the selected emoji. Defaults to true.

• searchPlaceholder: string - The placeholder text for the search input. Defaults to Search.

• categories: Allows full config over ordering, naming and display of categories. To only sort/omit categories, you can simply pass an array of category names to display:

  RECENTLY_USED = 'recently_used',
  SMILEYS_PEOPLE = 'smileys_people',
  ANIMALS_NATURE = 'animals_nature',
  FOOD_DRINK = 'food_drink',
  TRAVEL_PLACES = 'travel_places',
  ACTIVITIES = 'activities',
  OBJECTS = 'objects',
  SYMBOLS = 'symbols',
  FLAGS = 'flags'

For a more in-depth configuration, you can pass an array with category config:

[{
  category: Categories.RECENTLY_USED;
  name: "Recently Used";
}, {
  category: Categories.SMILEYS_PEOPLE;
  name: "Faces...";
}]