Tiny Emoji Picker In Pure JavaScript – EmojiButtonList.js

Category: Javascript | March 11, 2021
Author:williamtroup
Views Total:1,458 views
Official Page:Go to website
Last Update:March 11, 2021
License:MIT

Preview:

Tiny Emoji Picker In Pure JavaScript – EmojiButtonList.js

Description:

A super tiny (2.5kb minified) JavaScript library to create an emoji picker button, which allows you to pick emoji from the popup when clicked.

How to use it:

1. Attach the emoji picker button to your input field.

<input id="example" type="text" />
<button id="picker">Emoji Picker</button>

2. Load the EmojiButtonList.js JavaScript library in the document.

<link rel="stylesheet" href="src/emojibuttonlistjs.min.css" />
<script src="src/emojibuttonlistjs.min.js"></script>

3. Initialize the emoji picker button. That’s it.

instance = new emojiButtonList( "picker", {
  textBoxID: "example"
})

4. Config the emoji picker with the following parameters:

  • emojiRangesToShow: The array of emoji ranges that should be shown in the drop down list.
  • dropDownXAlign: Specify the X alignment of the drop down list (defaults to “left”, also accepts “center” and “right”).
  • dropDownYAlign: Specify the Y alignment of the drop down list (defaults to “bottom”, also accepts “top”).
  • textBoxID: The ID of a text box element that should the emojis inserted (defaults to null).
  • xAlignMargin: Specify the margin that should be applied to the X alignment for the drop down menu (defaults to 0).
  • yAlignMargin: Specify the margin that should be applied to the Y alignment for the drop down menu (defaults to 0).
instance = new emojiButtonList( "picker", {
  dropDownXAlign: "left",
  dropDownYAlign: "bottom"
  yAlignMargin: 0,
  xAlignMargin: 0,
  emojiRangesToShow: []
})

5. Trigger a function after an emoji has been selected.

instance = new emojiButtonList( "picker", { 
  onEmojiClick: function(emojiText) {
    // do something
  }
})

You Might Be Interested In:


Leave a Reply