Customizable JavaScript Emoji Picker – fgEmojiPicker.js

Category: Javascript | September 5, 2020
Author:woody180
Views Total:247 views
Official Page:Go to website
Last Update:September 5, 2020
License:MIT

Preview:

Customizable JavaScript Emoji Picker – fgEmojiPicker.js

Description:

fgEmojiPicker.js is a customizable, nice-looking emoji picker implemented in vanilla JavaScript and JSON.

Features:

  • You can attach the emoji picker to any element.
  • All emoji are defined in a JSON file.
  • You can add/remove emoji by editing the JSON.

How to use it:

1. Upload fgEmojiPicker.js and full-emoji-list.json files to the webserver.

2. Load the fgEmojiPicker.js on the HTML page.

<script src="fgEmojiPicker.js"></script>

3. Initialize the emoji picker and determine the trigger element as follows:

<textarea></textarea>
<button>Pick emoji</button>
new FgEmojiPicker({
    trigger: ['button', 'textarea']
});

4. Determine the position of the emoji picker popup.

new FgEmojiPicker({
    trigger: ['button', 'textarea'],
    position: ['bottom', 'right']
});

5. Trigger a function after an emoji is picked.

new FgEmojiPicker({
    trigger: ['button', 'textarea'],
    position: ['bottom', 'right'],
    emit(obj, triggerElement) {
      const emoji = obj.emoji;
      document.querySelector('textarea').value += emoji;
    }
});

Changelog:

09/05/2020

  • update events

You Might Be Interested In:


Leave a Reply