onesignal-emoji-picker
Advanced tools
Add a slick emoji selector to input fields and textareas on your website.
:heart_eyes: :stuck_out_tongue_winking_eye: :joy: :stuck_out_tongue: Instantly add Emoji support to input fields on your website! :boom: :sparkles: :thumbsup: :metal:
Demo: http://onesignal.github.io/emoji-picker/
#Installation & Usage:
On Robustness: This library isn't super robust, so if you find any issues, please report it so it can be fixed (or feel free to fix it yourself). Code quality improvements are also welcome, always looking to make it better!
On CDN & Multiple Files: Currently, the number of JavaScript files you have to include is not ideal (6 files). The files will eventually be concatenated and minified, but it might be a bit until this happens. When that's complete, it'll be added to CDNJs as well.
<head> section, add the following stylesheet links. Adjust the lib/css path to match yours. <link href="lib/css/nanoscroller.css" rel="stylesheet">
<link href="lib/css/emoji.css" rel="stylesheet">
<body> section, add the following JavaScript links. This library depends on jQuery, so jQuery must also be included, before these scripts are run. Once again, adjust the lib/css path to match yours. <!-- ** Don't forget to Add jQuery here ** -->
<script src="lib/js/nanoscroller.min.js"></script>
<script src="lib/js/tether.min.js"></script>
<script src="lib/js/config.js"></script>
<script src="lib/js/util.js"></script>
<script src="lib/js/jquery.emojiarea.js"></script>
<script src="lib/js/emoji-picker.js"></script>
On any input field, add the data attribute data-emojiable="true".
That's all you need for the default options. Play around with the demo to see what the default options give you.
#Configuring Options
I want the Emoji selector to input Unicode characters instead of images
Add data-emoji-input="unicode" to your input field. Only the unicode value is checked for; entering anything else has no effect.
I want to limit my input field to a certain number of characters (maxlength)
The maxlength property is mostly supported. Character input and emoji input each count as one character, so it'll stop you from entering more than the max length. Unfortunately, you can paste more than the maxlength number of characters, so that needs to be fixed.
I want classes from my original input field to be copied over to the rich emoji input area
They are!
#Trivia
###You get:
###What happens under the hood:
new EmojiPicker().discover(), all elements with the data attribute data-emojiable="true" are found, a contenteditable div is created after each one, and the original input field is hidden.<img> tagselement.val() on the underlying hidden input field. The <img> emojis will be converted into Unicode emojis (plain text)###Credits: This is a slightly modified version of angular-emoji-popup, which was written based on jquery-emojiarea (converts input fields to rich emoji input areas) and uses nanoScrollerJs (for the popup's custom-skinned scrollbar). This version removes AngularJS as a dependency.
###Improvements from the original forks:
maxlength property of input fields is respected (emoji selections count as a single character)We built this to power emoji selection for OneSignal, our multi-platform push notification service.
FAQs
Add a slick emoji selector to input fields and textareas on your website.
The npm package onesignal-emoji-picker receives a total of 101 weekly downloads. As such, onesignal-emoji-picker popularity was classified as not popular.
We found that onesignal-emoji-picker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.