Vanilla Emoji Picker – The Emoji button allows you to add the emoji picker to your website or app with a few simple lines of code. It supports all Unicode emojis even include Emoji, and it is fully customizable.
The Emoji button is not framework dependent, which allows you to use it in any JavaScript application.
Advantages:
- Vanilla JS, use with any framework
- Use original emoji or Twemoji
- Search for emojis
- Skin color differences
- Recently used emoji
- Fully accessible via the keyboard
- Dark, light and spontaneous themes
- Add your own custom emoji images
- Extend the functionality with additions
Creates A Small Dropdown List of Selectable Emojis | EmojiButtonList.js
How to make use of it:
Install & download the Emoji Button.
# Yarn $ yarn add @joeattardi/emoji-button # NPM $ npm i @joeattardi/emoji-button –save
Import the Emoji Button into the doc.
// ES6 module import { EmojiButton } from '@joeattardi/emoji-button';
Create an emoji button subsequent to the enter subject.
<input type="text"> <button id="emoji-button">?</button>
Attach the emoji picker to the enter subject.
window.addEventListener('DOMContentLoaded', () => { const button = document.querySelector('#emoji-button'); const picker = new EmojiButton(); picker.on('emoji', emoji => { document.querySelector('input').value += emoji; }); button.addEventListener('click', () => { picker.pickerVisible ? picker.hidePicker() : picker.showPicker(button); }); });
Customize the emoji picker with the next choices.
const picker = new EmojiButton({ // position of the emoji picker. Available positions: // auto-start, auto-end, top, top-start, top-end, right, right-start, right-end, bottom, bottom-start, bottom-end, left, left-start, left-end position: auto, // 1.0, 2.0, 3,0, 4.0, 5.0, 11.0, 12.0, 12.1 emojiVersion: '12.1', // root element rootElement: document.body, // enable animation showAnimation: true, // auto close the emoji picker after selection autoHide: true, // auto move focus to search field or not autoFocusSearch: true, // show the emoji preview showPreview: true, // show the emoji search input showSearch: true, // show recent emoji showRecents: true, // number of recent emoji recentsCount: 10 // show skin tone variants showVariants: true, // show category buttons showCategoryButtons: true, // or 'twemoji' style: 'native', // 'light', 'drak', or 'auto' theme: 'light', // number of emojis per row emojisPerRow: 5, // number of rows rows: 5, // emoji size emojiSize: '64px', // maximum number of recent emojis to save recentsCount: 50, // initial category initialCategory: 'recents', // z-index property zIndex: 999, // an array of the categories to show categories: [ 'smileys', 'people', 'animals', 'food', 'activities', 'travel', 'objects', 'symbols', 'flags' ], // custom emoji custom: [ { name: 'Conga parrot', emoji: './site/static/conga_parrot.gif' }, { name: 'O RLY?', emoji: './site/static/orly.jpg' } ], // custom icons icons: { search: '/search.svg', clearSearch: '/close.svg', notFound: '/nofound.svg' }, // i18n i18n: { search: 'Search', categories: { recents: 'Recently Used', smileys: 'Smileys & People', animals: 'Animals & Nature', food: 'Food & Drink', activities: 'Activities', travel: 'Travel & Places', objects: 'Objects', symbols: 'Symbols', flags: 'Flags' }, notFound: 'No emojis found' } });
API strategies.
// shows the emoji picker picker.showPicker(Element); // hides the emoji picker picker.hidePicker(); // checks if is visible picker.isPickerVisible(); // toggles the emoji picker togglePicker(Element);
Trigger an event when an emoji is picked.
// shows the emoji picker picker.on('emoji', function(){ // do something })
Convenient Emoji Picker In Vanilla JavaScript, Emoji Button Vanilla JavaScript Emoji Picker
See Demo And Download
Official Website(joeattardi): Click Here
This superior jQuery/javascript plugin is developed by joeattardi. For extra Advanced Usages, please go to the official website.
Be First to Comment