Vanilla JavaScript Emoji Picker

npm install @joeattardi/emoji-button

Demo

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

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

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

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

About

Emoji Button lets you add an emoji picker to your website or app with a few simple lines of code. It supports all Unicode emojis up to and including Emoji 12.1, and is fully customizable.

Vanilla JavaScript

Emoji Button doesn't rely on a particular framework, allowing you to use it in any JavaScript app.

Native or Twemoji styles

Uses the operating system's built-in emoji characters or the cross-platform Twemoji emoji library.

Emoji search

Search for emojis by name.

Emoji variations

Some emojis support skin tone, or other types of, variations. Emoji Button fully supports these variations.

Recent emojis

Remembers the previously/frequently selected emojis.

Keyboard accessible

No mouse required! Navigate the picker with the Tab and arrow keys.

Themes

Includes a dark and light theme. Also supports automatically setting the theme based on the user's operating system settings.

Custom emojis

Add your own custom images and GIFs to the emoji picker.

Plugins

Extend the picker UI with plugins.

Compatibility

Emoji Button works with all modern browsers. Internet Explorer is not supported.