Vanilla JavaScript emoji picker
npm install simple-emoji-buttonAs for now, this is just a fork of @joeattardi emoji-button with added automation for pulling CLDR emoji annotation data (see scripts). It is also possible to search emoji by localized keywords.
---
Vanilla JavaScript emoji picker 😎
* 💻 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
Emoji Button is supported on all modern browsers supporting the latest JavaScript features. Internet Explorer is not supported.
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
First, you'll need a trigger element. This is typically a button, and is used to toggle the emoji picker.
``html`
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.
`javascript
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));
``
The easiest way to hack on Emoji Button is to use the documentation site. First, you should fork this repository.
git clone https://github.com/your-name/emoji-button.git
#### Install dependencies
npm install
#### Set up the link
npm link
#### Start the build/watch loop
npm run build:watch
#### Install dependencies
npm install
#### Link the library
npm link @joeattardi/emoji-button
#### Start the documentation site
npm run develop
http://localhost:8000