Easy Emoji Picker With jQuery And Twemoji - lsxemojipicker.js
File Size: | 69.2 KB |
---|---|
Views Total: | 8659 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

The lsxemojipicker.js jQuery plugin makes use of Twitter's Twemoji library to create a Unicode emoji picker on your modern web app.
How to use it:
1. Load the necessary jQuery library and Twemoji in your html document.
<script src="https://twemoji.maxcdn.com/2/twemoji.min.js" integrity="sha384-vojMYWMgmEhE4UFyXarYAx15WrGwFWfYep8svrRf1anCUzrYn9xlhuXrK9fgsixc" crossorigin="anonymous"> </script> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script>
2. Load the Lascaux jQuery Emoji picker plugin's files in the document.
<link href="src/jquery.lsxemojipicker.css" rel="stylesheet"> <script src="src/jquery.lsxemojipicker.js"></script>
3. Create a button to toggle the emoji picker.
<button class="picker">Pick An Emoji</button>
4. Activate the emoji picker and done.
$('.picker').lsxEmojiPicker({ twemoji: true, onSelect: function(emoji){ console.log(emoji); } });
5. This will output an object containing key-value pairs when you select an emoji:
{ name: "weary", value: "😩" }
6. Set the height/width of the emoji picker.
$('.picker').lsxEmojiPicker({ width: 220, height: 200, twemoji: true, onSelect: function(emoji){ console.log(emoji); } });
7. The plugin also supports native emoji without the need of Twemoji library.
$('.picker').lsxEmojiPicker({ twemoji: false, onSelect: function(emoji){ console.log(emoji); } });
This awesome jQuery plugin is developed by LascauxSRL. For more Advanced Usages, please check the demo page or visit the official website.