Customizable JavaScript Emoji Picker – fgEmojiPicker.js

Category: Javascript | April 17, 2021
Author:woody180
Views Total:1,255 views
Official Page:Go to website
Last Update:April 17, 2021
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. Determine the path to the directory that holds the emoji JSON.

new FgEmojiPicker({
    dir: 'directory/to/json'
});

6. Determine whether to prefetch the emoji.

new FgEmojiPicker({
    preFetch: true
});

7. Determine the element in which the emoji will be placed.

new FgEmojiPicker({
    insertInto: document.querySelector('textarea')
});</pre

8. 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:

04/17/2021

  • close button is true by default

03/18/2021

  • fix multiple emoji bug

03/16/2021

  • focus on emoji position

03/09/2021

  • remove on escape btn

03/06/2021

  • html to node with DOMParser

01/02/2020

  • close on escape key

12/30/2020

  • insertInto option, put emoji into cursor position

12/19/2020

  • JS update

09/05/2020

  • update events

You Might Be Interested In:


3 thoughts on “Customizable JavaScript Emoji Picker – fgEmojiPicker.js

  1. Sven

    Great script, very lightweight and easy to use! You have keywords in the JSON-file but you only search in the names. I made some changes to fix it:

    In line 176 I made the search term lowercase to make the search case-insensitive:
    const val = e.target.value.toLowerCase();

    In line 181 I changed data-name to data-keywords

    In line 616 I added this to every to search in name AND keywords: data-keywords=”${item.description.toLowerCase()} ${item.keywords.join(” “).toLowerCase()}”

    Now you should find “rofl” or “germany” which did’nt work before.

    Reply
  2. Nikunj

    How to setup multiple emoji picker with multiple input on same page?

    Reply

Leave a Reply