Styles

Emoji Button supports two different styles of emojis, controlled by the style option.

Native

Uses the native emoji characters built in to the operating system. These are the actual Unicode characters. This is the default setting.

Twemoji

Uses Twitter's Twemoji library. This is a cross-platform emoji library that uses SVG images in place of emoji characters. This is a good choice if you want a consistent emoji style on all platforms.

To use the Twemoji style, set the style property to twemoji in the options object passed to the EmojiButton constructor.

When using Twemoji, you can also optionally pass a twemojiOptionsobject to the EmojiButton options. This will customize how Twemoji parses and generates an image URL. For valid Twemoji options, see the Twemoji documentation.

When using the Twemoji style, the argument to the emoji event has a url property, which is the URL of the Twemoji image corresponding to the emoji that was selected. The emoji property is also present.

import { EmojiButton } from '@joeattardi/emoji-button';

const trigger = document.querySelector('.trigger');

const picker = new EmojiButton({
  style: 'twemoji'
});

picker.on('emoji', selection => {
  // Remove the old image
  trigger.removeChild(trigger.firstChild);

  // Add the new image for the new Twemoji
  const img = document.createElement('img');
  img.src = selection.url;
  img.alt = selection.emoji + ' ' + selection.name;
  trigger.appendChild(img);
});

trigger.addEventListener('click', () => {
  picker.togglePicker(trigger);
});