Easy Emoji Picker With jQuery And Twemoji - lsxemojipicker.js

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: "&#x1f629"
}

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.