Author: | williamtroup |
---|---|
Views Total: | 1,605 views |
Official Page: | Go to website |
Last Update: | March 11, 2021 |
License: | MIT |
Preview:

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 } })