Customizable JavaScript Emoji Picker – vanillaEmojiPicker.js

Preview:

Description:

vanillaEmojiPicker.js (previously named fgEmojiPicker.js) is a customizable, nice-looking emoji picker implemented in vanilla JavaScript.

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. Load the vanillaEmojiPicker.js on the HTML page.

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

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

new EmojiPicker({
    trigger: [
        {
          selector: '.trigger',
          insertInto: ['.demo'] // '.selector' can be used without array
        },
    ],
});

4. Determine whether to show a close button inside the emoji picker.

new EmojiPicker({
    trigger: [
        {
          selector: '.trigger',
          insertInto: ['.demo'] // '.selector' can be used without array
        },
    ],
    closeButton: true,
});

5. Determine whether to close the emoji picker after selected

new EmojiPicker({
    trigger: [
        {
          selector: '.trigger',
          insertInto: ['.demo'] // '.selector' can be used without array
        },
    ],
    closeOnSelect: true,
});

6. Set the background color of the buttons.

new EmojiPicker({
    trigger: [
        {
          selector: '.trigger',
          insertInto: ['.demo'] // '.selector' can be used without array
        },
    ],
    specialButtons: 'green',
});

Changelog:

10/25/2023

• dispatch “input” event and added closeOnSelect option

01/09/2022

• v2.0.1: fix text selection bug

12/12/2021

• v2.0

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