1.0.1 • Published 5 years ago
emoji-picker-textarea v1.0.1
Emoji picker
Add a emoji to textarea on your web page.
Emoji list
Its emoji list was created based on the Unicode Emoji data files. The order is same the emoji-test.txt.
Excludes
- v13.0
- Skin tones
- Unqualified emoji
Usage
- Install a
emoji-picker-textareawith npm.
$ npm install emoji-picker-textarea- Add the stylesheet link in your
<head>section.
<link rel="stylesheet" type="text/css" href="node_modules/emoji-picker-textarea/css/emoji-picker-textarea.css" />- Add the JavaScript link before the end of your
<body>section.
<script type="text/javascript" src="node_modules/emoji-picker-textarea/index.js"></script>- Add some JavaScript codes are creating
EmojiPicker, showing the picker and hiding it.
let emojiPicker;
let isOpen = false;
function createEmojiPicker() {
// Add a emoji to this textarea.
let textarea = document.getElementById("textarea");
// Show the picker to this element. The element would be parent of the picker.
let picker_area = document.getElementById("emoji-picker-area");
// Create the picker by specifying the width and height of it.
emojiPicker = new EmojiPicker(textarea, picker_area, "250px", "200px");
}
function toggleEmojiPicker() {
if (isOpen) {
// Hide the picker.
emojiPicker.hide();
else {
// Show the picker.
emojiPicker.show();
}
isOpen = !isOpen;
}