Demo: Native Style

Demo: Twemoji Style

Installation

npm install @joeattardi/emoji-button

yarn add @joeattardi/emoji-button

<script src="https://cdn.jsdelivr.net/npm/@joeattardi/emoji-button@3.0.2/dist/index.min.js"></script>

Basic Usage

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

window.addEventListener('DOMContentLoaded', () => {
  const button = document.querySelector('#emoji-button');
  const picker = new EmojiButton();

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

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

TypeScript note

Because the EmojiButton class is a default export, it requires a small tweak to import the library in a TypeScript project. There are two options:

1. Enable the esModuleInterop compiler option and import it normally as shown in the above example
2. Import the module using the following syntax: import EmojiButton = require('@joeattardi/emoji-button');.