Press "Enter" to skip to content

Easy and Simple Emoji Picker with Using JavaScript | fgEmojiPicker.js

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

text box with emoji picker, emoji picker demo, jquery emoji picker textarea, how to add emoji picker in html, react emoji picker, vanilla emoji picker


  • You can attach the emoji picker to any aspect.
  • All emoji are outlined in a JSON file.
  • You can add/remove emoji by modifying the JSON.

How to make use of it:

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

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

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

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

Customizable JavaScript Emoji Picker, Emoji Picker Github/Plugin, html emoji picker

See Demo And Download

Official Website(woody180): Click Here

This superior jQuery/javascript plugin is developed by woody180. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.