Vanilla JavaScript emoji picker 😎

https://joeattardi.github.io/emoji-button

• 💻 Vanilla JS, use with any framework
• 🔎 Emoji search
• 👍🏼 Skin tone variations
• ⏱ Recently used emojis

npm install --save emoji-button

  import EmojiButton from 'emoji-button';

  const button = document.querySelector('#emoji-button');
  const picker = new EmojiButton();

  picker.on('emoji', emoji => {
    document.querySelector('input').value += emoji;
  });

  button.addEventListener('click', () => {
    picker.pickerVisible ? picker.hidePicker() : picker.showPicker(button);
  });

Creates an Emoji Button emoji picker.

• position: The position to display the picker relative to the reference element. Valid values are:

  • auto
  • auto-start
  • auto-end
  • top
  • top-start
  • top-end
  • right
  • right-start
  • right-end
  • bottom
  • bottom-start
  • bottom-end
  • left
  • left-start
  • left-end

• rootElement: The root DOM node to attach the picker to. Defaults to the body if not passed in.

• autoHide: (boolean, default: true) Whether or not the picker should automatically be hidden when an emoji is clicked.

• i18n: An object containing localized messages to display in the UI. The values and their defaults are as follows:

{
  search: 'Search',
  categories: {
    recents: 'Recently Used',
    smileys: 'Smileys & People',
    animals: 'Animals & Nature',
    food: 'Food & Drink',
    activities: 'Activities',
    travel: 'Travel & Places',
    objects: 'Objects',
    symbols: 'Symbols',
    flags: 'Flags'
  },
  notFound: 'No emojis found'
}

Shows the picker, positioning it relative to the given reference element. The reference element is usually the button or other element that was clicked to open the picker.

Hides the picker.

Will be true if the picker is currently visible, and false if not.

Adds an event listener. Currently there is only one event:

• emoji: Fired when an emoji is picked. The callback is called with a single argument, the emoji character that was picked.

The easiest way to hack on Emoji Button is to use the examples page.

git clone https://github.com/joeattardi/emoji-button.git

npm install

npm link

npm run build:watch

npm install

npm link emoji-button

npm start

http://localhost:5000