Convenient Emoji Picker In Vanilla JavaScript – Emoji Button

Category: Javascript | October 19, 2019
Author: joeattardi
Views Total: 67
Official Page: Go to website
Last Update: October 19, 2019
License: MIT

Preview:

Convenient Emoji Picker In Vanilla JavaScript – Emoji Button

Description:

Emoji Button is a pure JS emoji picker where the users can quickly search and select emoji from a categorized emoji picker popup.

It also provides a Recent Used tab that shows the recently picked emoji.

How to use it:

Install & download the Emoji Button.

# NPM
$ npm install emoji-button --save

Import the Emoji Button into the document.

// ES6 module
import EmojiButton from 'emoji-button';
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>

Create an emoji button next to the input field.

<input type="text">
<button id="emoji-button">😀</button>

Attach the emoji picker to the input field. That’s it.

window.addEventListener('DOMContentLoaded', () => {
  const button = document.querySelector('#emoji-button');
  const picker = new EmojiButton();

  picker.on('emoji', emoji => {
    document.querySelector('input').value += emoji;
  });

  button.addEventListener('click', () => {
    picker.pickerVisible ? picker.hidePicker() : picker.showPicker(button);
  });
});

Customize the emoji picker with the following options.

const picker = new EmojiButton({

      // position of the emoji picker. Available positions:
      // auto-start, auto-end, top, top-start, top-end, right, right-start, right-end, bottom, bottom-start, bottom-end, left, left-start, left-end
      position: auto,

      // root element
      rootElement: document.body,

      // auto close the emoji picker after selection
      autoHide: true,

      // i18n
      i18n: {
        search: 'Search',
        categories: {
          recents: 'Recently Used',
          smileys: 'Smileys & People',
          animals: 'Animals & Nature',
          food: 'Food & Drink',
          activities: 'Activities',
          travel: 'Travel & Places',
          objects: 'Objects',
          symbols: 'Symbols',
          flags: 'Flags'
        },
        notFound: 'No emojis found'
      }

});

API methods.

// shows the emoji picker
picker.showPicker(Element);

// hides the emoji picker
picker.hidePicker();

// checks if is visible
picker.pickerVisible();

Trigger an event when an emoji is picked.

// shows the emoji picker
picker.on('emoji', function(){
  // do something
})

Changelog:

v2.1.1 (10/19/2019)

  • Added option to specify the root element for the picker to be rendered under.
  • Added option to supply i18n strings.
  • Added option to prevent the picker from auto-hiding when picking an emoji.
  • Fixed the search results not taking up the full height.

You Might Be Interested In:


Leave a Reply