Easy and Simple Emoji Picker with Using JavaScript

The Emoji picker was created using vanilla javascript. fgEmojiPicker JS is a customizable and looking emoji picker implemented in Vanilla JavaScript and JSON.

Features:

It is only one .js file without CSS or other files
There is no jQuery or other libraries
Simplicity of usage
Multiple textareas and triggers
Draggable emoji picker container

Must Read: Creates A Small Dropdown List of Selectable Emojis | EmojiButtonList.js

Simple fgEmojiPicker.js

Post Name	fg Emoji Picker JS
Author Name	woody180
Category	Emoji, Icons
Official Page	Click Here
Official Website	github.com
Publish Date	September 5, 2020
Last Update	August 15, 2023
Download	Link Below
License	MIT

How to make use of it:

1. Load fgEmojiPicker.js on the HTML web page.

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

2. Initialize the emoji picker and determine the trigger component as follows:

<textarea></textarea>
<button>Pick emoji</button>

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

3. Determine the position of the emoji picker popup.

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

4. 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;
    }
});

Options

Trigger – should be an array of objects. Inside the object, there are two properties. The first is the selector, and the second is the insert-into method for determining where to insert the emoji. If there are multiple text areas – you can provide a set of delimiters as well.
close button – The closeButton the method can be true or false depending on whether or not you want the close button in the emoji picker.
specialButtons – takes the color code to change special button colors (move and close).