Press "Enter" to skip to content

How to Add Emoji Button In Vanilla JavaScript | emoji-picker

Vanilla Emoji Picker – The Emoji button allows you to add the emoji picker to your website or app with a few simple lines of code. It supports all Unicode emojis even include Emoji, and it is fully customizable.

The Emoji button is not framework dependent, which allows you to use it in any JavaScript application.

Advantages:

  • Vanilla JS, use with any framework
  • Use original emoji or Twemoji
  • Search for emojis
  • Skin color differences
  • Recently used emoji
  • Fully accessible via the keyboard
  • Dark, light and spontaneous themes
  • Add your own custom emoji images
  • Extend the functionality with additions

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

How to make use of it:

Install & download the Emoji Button.

# Yarn
$ yarn add @joeattardi/emoji-button

# NPM
$ npm i @joeattardi/emoji-button –save

Import the Emoji Button into the doc.

// ES6 module
import { EmojiButton } from '@joeattardi/emoji-button';

Create an emoji button subsequent to the enter subject.

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

Attach the emoji picker to the enter subject.

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 next choices.

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,

      // 1.0, 2.0, 3,0, 4.0, 5.0, 11.0, 12.0, 12.1
      emojiVersion: '12.1',

      // root element
      rootElement: document.body,

      // enable animation
      showAnimation: true,

      // 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,

      // number of recent emoji
      recentsCount: 10

      // show skin tone variants
      showVariants: true,

      // show category buttons
      showCategoryButtons: true,

      // or 'twemoji'
      style: 'native',

      // 'light', 'drak', or 'auto'
      theme: 'light',

      // number of emojis per row
      emojisPerRow: 5,

      // number of rows
      rows: 5,

      // emoji size
      emojiSize: '64px',

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

      // initial category
      initialCategory: 'recents',

      // z-index property
      zIndex: 999,

      // an array of the categories to show
      categories: [
        'smileys',
        'people',
        'animals',
        'food',
        'activities',
        'travel',
        'objects',
        'symbols',
        'flags'
      ],

      // custom emoji
      custom: [
        {
          name: 'Conga parrot',
          emoji: './site/static/conga_parrot.gif'
        },
        {
          name: 'O RLY?',
          emoji: './site/static/orly.jpg'
        }
      ],

      // custom icons
      icons: {
        search: '/search.svg',
        clearSearch: '/close.svg',
        notFound: '/nofound.svg'
      },

      // 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 strategies.

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

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

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

// toggles the emoji picker
togglePicker(Element);

Trigger an event when an emoji is picked.

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

Convenient Emoji Picker In Vanilla JavaScript, Emoji Button Vanilla JavaScript Emoji Picker


See Demo And Download

Official Website(joeattardi): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *