Convenient Emoji Picker In Vanilla JavaScript – Emoji Button

Category: Javascript , Recommended | March 18, 2022
Views Total:916 views
Official Page:Go to website
Last Update:March 18, 2022


Convenient Emoji Picker In Vanilla JavaScript – Emoji Button


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.

Supports both native emoji and Tweemoji library.

How to use it:

Install & download the Emoji Button.

# Yarn
$ yarn add @joeattardi/emoji-button

$ npm i @joeattardi/emoji-button –save

Import the Emoji Button into the document.

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

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,
      // 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',
      twemojiOptions: {
        ext: '.svg',
        folder: 'svg'
      // '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: [
      // 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 methods.

// shows the emoji picker
// hides the emoji picker
// checks if is visible
// toggles the emoji picker

Trigger an event when an emoji is picked.

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

Trigger an event when the emoji picker is hidden.

picker.on('hidden', function(){
  // do something


v4.6.4 (03/18/2022)

  • Fixed TypeScript issue with twemoji

v4.6.2 (11/25/2021)

  • Fixed additional XSS vulnerabilities

v4.6.1 (11/24/2021)

  • Fixed XSS vulnerability with custom emojis. Custom emoji URLs could be crafted in such a way to trigger an XSS attack. All places where custom emoji URLs are used are now sanitized.

v4.6.0 (12/04/2020)

  • Added support for custom emoji data
  • Fixed the incorrect category button being selected when selecting the Activities or Travel categories.

v4.5.1 (11/24/2020)

  • Fixed incorrect typings

v4.5.0 (11/17/2020)

  • Performed refactoring of Emoji Button internals.
  • Full typings are now automatically generated at build time.

v4.4.0 (11/14/2020)

  • Added twemojiOptions option to the picker options

v4.3.0 (11/03/2020)

  • Added support for overriding CSS variables to further customize the emoji picker’s appearance.

v4.2.0 (09/20/2020)

  • The emoji event now includes the name of the selected emoji
  • Fixed picker jumping before being destroyed
  • Fixed hide animation not working

v4.1.0 (08/29/2020)

  • Added hidden event that is emitted when the picker is hidden
  • Added the ability to switch themes after constructing the picker
  • Bug fixes

v4.0.4 (08/24/2020)

  • Made rootElement option optional.

v4.0.3 (08/24/2020)

  • Fixed the scroll position jumping when showing the picker in some cases.

v4.0.2 (07/31/2020)

  • Added the missing rootElement option to the type definitions.

v4.0.1 (07/23/2020)

  • Fixed a minor doc issue

v4.0.0 (07/23/2020)

  • Added support for custom emojis
  • Added support for plugins
  • Added support for custom icons
  • Added support for fixed positioning
  • Added the ability to disable animations
  • Added support to specify the initial category
  • Added fuzzy search support in emoji search

v3.1.1 (06/07/2020)

  • Improved experience on mobile
  • Fixed error in the console when search field is hidden
  • Fix scrollbars by increasing horizontal padding

v3.0.3 (05/01/2020)

  • Fixed an issue where the autoFocusSearch option was not being respected if set to false.

v3.0.2 (04/28/2020)

  • Fixed an issue where the category buttons were not behaving correctly when the browser was zoomed in or out.

v3.0.1 (04/25/2020)

  • Fixed errors when there are no recent emojis in local storage.

v3.0.0 (04/17/2020)

  • Improved show/hide animations
  • Changed from clicking to switch tabs to an “endless scroll” design
  • Improved keyboard navigation
  • More flexible display options – emojis per row, number of rows, emoji size
  • This release drops support for Internet Explorer 11

v2.12.1 (03/12/2020)

  • Fixed the search results so that they only contain emojis in the categories that are selected.

v2.11.2 (03/01/2020)

  • Added support for Twemoji
  • Fixed some emoji data

v2.11.1 (02/28/2020)

  • Bugs fixed

v2.11.0 (02/27/2020)

  • Various CSS tweaks
  • Added the categories option

v2.10.0 (02/25/2020)

  • Fix flag emoji names
  • New emoji data source with more versions available

v2.9.1/2/3 (02/23/2020)

  • Fixed TypeScript declarations
  • Format emoji names

v2.9.0 (02/22/2020)

  • Added theme options: light, dark, and auto (light or dark depending on OS settings)

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:

2 thoughts on “Convenient Emoji Picker In Vanilla JavaScript – Emoji Button

Leave a Reply