Plugins

You can extend the emoji picker's UI using plugins.

A plugin is a JavaScript object with a property called render. The value of that property should be a function that takes in the picker instance as its sole parameter. The return value of the render function should be an HTMLElement that contain the user interface for the plugin.

A plugin can also optionally define a destroy function which will be called when the picker is destroyed, which can be used to perform any necessary cleanup.

Plugins are passed as an array into the plugins picker option. The plugins will be rendered at the top of the picker.

In the example on this page, we show a blank button until an emoji is chosen. We have a plugin that adds a "Remove" button to the picker. If that button is clicked, it removes the current emoji selection and closes the picker.

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

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

const removePlugin = {
  render(picker) {
    const button = document.createElement('button');
    button.innerHTML = 'Remove';
    button.addEventListener('click', () => {
      trigger.innerHTML = '';
      picker.hidePicker();
    });

    return button;
  }
};

const picker = new EmojiButton({
  plugins: [removePlugin]
});

picker.on('emoji', selection => {
  trigger.innerHTML = selection.emoji;
});

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