Vanilla JavaScript emoji picker 😎

Screenshot

Demo and Documentation

https://emoji-button.js.org

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

Open the page

http://localhost:8000