Simple Emoji Picker with Vanilla JavaScript

Emoji Popover is a very small but highly customizable component written in Vanilla JavaScript. With this component, users can select emojis from a popup associated with the input field you select.

javascript emoji picker, emoji picker textarea javascript, react emoji picker, vanilla emoji picker, javascript emoji library, emoji picker element

Note that the Emoji Popover JavaScript library does not include any emojis, which means you have to define your own emoji list during init. See below for more details.

Features:

📦 brotli: 0.7kb
💻 Vanilla JS, no dependency, use with any framework
🙅‍ No Emoji is integrated
⚙️ Add your own custom emojis, native, image or any text
🎨 Use CSS variables to define any style
🧩 Extend the functionality with plugins

Browser support

Emoji Popover is supported on all modern browsers supporting the latest JavaScript features. Internet Explorer 11 +.

How to make use of it:

1. Install & import the Emoji Popover element with NPM.

# NPM
$ npm i emoji-popover --save

import EmojiPopover from 'emoji-popover'
import '/node_modules/emoji-popover/dist/style.css'

2. Or include the required JavaScript and Stylesheet within the doc.

<link rel="stylesheet" href="dist/style.css" />
<script src="dist/emoji-popover.umd.js"></script>

3. Create a button to toggle the emoji picker popover.

<button class="picker">Pick An Emoji</button>

4. Create an input discipline to show the chosen emoji.

<input class="emoji-picker" />

5. Initialize the emoji picker and accomplished.

const el = new EmojiPopover({
  button: '.picker',
  targetElement: '.emoji-picker',
  emojiList: [
    {
      value: '🤣',
      label: 'laugh and cry'
    },
    // more emoji here
  ]
})

6. Get the chosen emoji.

el.onSelect(l => {
  document.querySelector(".emoji-picker").value+=l
    console.log(value);
})

7. More configuration choices.

const el = new EmojiPopover({

  // the emoji picker should be appended to this container
  container: 'body',

  // custom wrapper class
  wrapClassName: '',

  // open/close animation
  wrapAnimationClassName: 'anim-scale-in'

})

8. Toggle the emoji picker popover manually.

el.toggle();

9. Customize the looks of the emoji picker.

:root {
  --e-color-border: #e1e1e1;
  --e-color-emoji-text: #666;
  --e-color-border-emoji-hover: #e1e1e1;
  --e-color-bg: #fff;
  --e-bg-emoji-hover: #f8f8f8;
  --e-size-emoji-text: 16px;
  --e-width-emoji-img: 20px;
  --e-height-emoji-img: 20px;
  --e-max-width: 288px;
}

Minimal Emoji Picker With Vanilla JavaScript, Emoji Popover Plugin/Github, emoji button js cdn, emoji in html input