Vanilla JavaScript emoji picker
Screenshot
Demo and Documentation
Features
-
💻 Vanilla JS, use with any framework -
😀 Use native or Twemoji emojis -
🔎 Emoji search - 👍🏼 Skin tone variations
-
⏱ Recently used emojis -
⌨️ Fully keyboard accessible -
🎨 Dark, light, and auto themes -
⚙️ Add your own custom emoji images -
🧩 Extend functionality with plugins
Browser support
Emoji Button is supported on all modern browsers supporting the latest JavaScript features. Internet Explorer is not supported.
Installation
If you are using a package manager like yarn or npm, you can install Emoji Button directly from the npm registry:
npm install @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 id="emoji-trigger">Emoji</button>Once you've added the trigger, you will need to import the EmojiButton class and create a new instance. Various options can be passed to the constructor, which is covered in the API documentation.
After constructing a picker, it can be shown by calling showPicker or togglePicker on it. These functions expect a reference element as a parameter. The picker is positioned relative to this reference element.
When an emoji is selected, the picker will emit an emoji event, passing an object containing data about the emoji that was selected. You can then handle the selected emoji however you want.
For more in depth documentation and examples, please visit https://emoji-button.js.org.
import { EmojiButton } from '@joeattardi/emoji-button';
const picker = new EmojiButton();
const trigger = document.querySelector('#emoji-trigger');
picker.on('emoji', selection => {
// handle the selected emoji here
console.log(selection.emoji);
});
trigger.addEventListener('click', () => picker.togglePicker(trigger));Development
The easiest way to hack on Emoji Button is to use the documentation site. First, you should fork this repository.
Clone the forked repository
git clone https://github.com/your-name/emoji-button.git
From the repository root
Install dependencies
npm install
Set up the link
npm link
Start the build/watch loop
npm run build:watch
From the site subdirectory
Install dependencies
npm install
Link the library
npm link @joeattardi/emoji-button
Start the documentation site
npm run develop