Vanilla JavaScript emoji picker
GitHub Project/Documentation

Demo: Native Style

Demo: Twemoji Style

Installation

Via npm:
npm install @joeattardi/emoji-button
Via yarn:
yarn add @joeattardi/emoji-button
Via jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/@joeattardi/emoji-button@3.0.3/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');.