Contents
About:
Its a highly customizable emoji picker which is developed using Vanilla JavaScript. This component enables your users to select emojis from the emoji picker popover by clicking on input field/button attached.
This component gives you the flexibility to define your own list of emojis while you are configuring it.
How to configure and use it?
1. You can install it via NPM.
npm i emoji-popover
2. Or, if you are not using any package manager in your project then, you can download it from Download button above and include it to your document.
<link rel=”stylesheet” href=”styles.css” />
<script src=”emoji-popover.umd.js”></script>
3. Create an input field in your document and a button.
<div class=”wrap”>
<input class=”e-input” type=”text” />
<button class=”e-btn”>Click Me</button>
</div>
4. Now, initiate the emoji picker component and configure the emojis list that will be available for users to select.
const e1 = new EmojiPopover({
button: ‘.e-btn’,
container: ‘.accordion__container’,
targetElement: ‘.e-input’,
emojiList: [
{
value: ‘🤣’,
label: ‘laugh and cry’
},
{
value: ‘(°∀°)ﾉ’,
label: ”
}
]
})
e1.onSelect(l => {
document.querySelector(“.e-input”).value+=l
})
5. CSS classes, you might want to override.
:root {
–e-color-border: #e1e1e1; /* EmojiPopover border color */
–e-color-emoji-text: #666; /* text emoji font color */
–e-color-border-emoji-hover: #e1e1e1; /* emoji hover border color */
–e-color-bg: #fff; /* EmojiPopover background color */
–e-bg-emoji-hover: #f8f8f8; /* emoji hover background color */
–e-size-emoji-text: 16px; /* text emoji font size */
–e-width-emoji-img: 20px; /* image emoji width */
–e-height-emoji-img: 20px; /* image emoji height */
–e-max-width: 288px; /* EmojiPopover max width */
}
The post A minimal Vanilla JavaScript emoji picker – Emoji Popover appeared first on Lipku.com.