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.