Documentation

Emoji Button is a vanilla JavaScript emoji picker component. It displays a panel of emojis where one can be selected. What is done with the selected emoji is up to you.

Installation

Emoji Button is published as an npm package, and can be installed with npm or Yarn.

# Using npm
npm install @joeattardi/emoji-button

# Using yarn
yarn add @joeattardi/emoji-button

Basic usage

First, you'll need a trigger element. This is typically a button, and is used to toggle the emoji picker.

<button class="trigger">Emoji</button>

Once you've added the trigger, you need to import the EmojiButton class and create a new instance. Various options can be passed to the constructor, which will be shown in future examples.

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

const picker = new EmojiButton();
const trigger = document.querySelector('.trigger');

picker.on('emoji', selection => {
  // `selection` object has an `emoji` property
  // containing the selected emoji
});

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

To show the picker, call showPicker or togglePicker on the EmojiButton instance. The picker will appear and the user can select an emoji. When an emoji is selected, the EmojiButton instance will emit an emoji event. You can listen for this event by calling on on the instance, and then handle the selected emoji however you want.

When the picker is visible, there are several ways it can be closed:

  • Select an emoji (unless the autoHide option is set to false)
  • Click anywhere outside of the picker
  • Press the Escape key
  • Call the hidePicker or togglePicker methods on the picker instance.

The showPicker and togglePicker methods expect a reference element as their first argument. The reference element is used to calculate the picker's position on screen. The picker will be positioned relative to the reference element.

The argument to the emoji will be an object with an emoji property, which contains the selected emoji character. You can then handle this emoji as you see fit.