guangzan / emoji-button Goto Github PK

Vanilla JavaScript emoji picker 😎

https://emoji-button.js.org

• 💻 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.

<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));

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

npm install

npm link

npm run build:watch

npm install

npm link @joeattardi/emoji-button

npm run develop

http://localhost:8000