Custom Emojis

Emoji Button also supports adding your own custom emojis as images.

Custom emojis are specified as an array of objects passed to the custom property of the EmojiButton options. Each element of the array is expected to have two properties:

• name: The display name of the emoji
• emoji: The URL of the image to use for the custom emoji

When a custom emoji is selected, the argument to the emoji event will have a url property just like a Twemoji selection. It will also have a custom property set to true to indicate that it is a custom emoji.

If you use custom emojis with the native emoji style, you will have to differentiate between the images of custom emojis and the emoji characters of built-in native emojis, as shown in the example on this page.

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

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

const picker = new EmojiButton({
  custom: [
    {
      name: 'Conga parrot',
      emoji: './site/static/conga_parrot.gif'
    },
    {
      name: 'O RLY?',
      emoji: './site/static/orly.jpg'
    }
  ]
});

picker.on('emoji', selection => {
  trigger.removeChild(trigger.firstChild);

  if (selection.url) {
    const img = document.createElement('img');
    img.src = selection.url;
    img.alt = selection.emoji + ' ' + selection.name;
    trigger.appendChild(img);
  } else {
    const span = document.createElement('span');
    span.innerHTML = selection.emoji + ' ' + selection.name;
    trigger.appendChild(span);
  }
});

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