Convenient Emoji Picker In Vanilla JavaScript – Emoji Button

Category: Javascript , Recommended | February 15, 2020
Author: joeattardi
Views Total: 290
Official Page: Go to website
Last Update: February 15, 2020
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,

      // 0.0, 2.0, 4.0, 5.0, 11.0, 12.1
      emojiVersion: '12.1',

      // root element
      rootElement: document.body,

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

      // auto move focus to search field or not
      autoFocusSearch: true,

      // show the emoji preview
      showPreview: true,

      // show the emoji search input
      showSearch: true,

      // show recent emoji
      showRecents: true,

      // show skin tone variants
      showVariants: true,

      // maximum number of recent emojis to save
      recentsCount: 50,

      // z-index property
      zIndex: 999,

      // 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.8.2 (02/15/2020)

  • Fixed a few minor bugs with keyboard navigation in the search results view.

v2.8.1 (02/13/2020)

  • Fixed broken keyboard navigation in search results view.

v2.8.0 (02/11/2020)

  • Implemented keyboard navigation
  • Fixed display issue when showing variant popup
  • Fixed size of close button on variant popup

v2.7.3 (02/09/2020)

  • Fixed behavior when pressing Tab while in the search field
  • Fixed disappearing recents when autoHide is set to false

v2.7.2 (01/26/2020)

  • Removed margin on outer picker element

v2.7.1 (01/25/2020)

  • Fixed missing recent emoji

v2.7.0 (01/25/2020)

  • Added an emojiVersion option that lets you specify which emojis to include in the picker.
  • Upgraded to new popper.js library

v2.6.1 (01/24/2020)

  • Fixed an issue where the picker would not appear if it was triggered while a previous one was being hidden.

v2.6.0 (01/24/2020)

  • Added new emoji

v2.5.4 (01/07/2020)

  • Fixed accidental centering of emojis with an incomplete row

v2.5.3 (01/07/2020)

  • Fixed IE11 support

v2.5.2 (12/12/2019)

  • Scroll to top when switching tabs

v2.4.0 (12/10/2019)

  • Fix emoji content overflowing container
  • Add customizable z-index

v2.3.0 (11/17/2019)

  • UI tweaks
  • Added more options

v2.2.5 (11/17/2019)

  • Update

v2.2.0 (11/15/2019)

  • Added autoFocusSearch option

v2.1.2 (11/09/2019)

  • Fixed rendering issue with some emojis

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