EMOJI PANEL create emoji picker panel anywhere easily Extra small, with 3ms creation time!

Seperated css, with multiple emojies options Will affect entire demo site - Size: 16 20 32 64 imageSet: Apple Google Twitter Emojione <head> <link rel="stylesheet" href="dist/emoji-panel-apple-32.min.css"> <head/>

// es6 import EmojiPanel from 'emoji-panel'; new EmojiPanel(document.getElementById('example-1')); // es5 var EmojiPanel = require('emoji-panel'); new EmojiPanel(document.getElementById('example-1')); /* Must provide or limit the height of the container */ #example-1 { height: 400px }

// Click event example new EmojiPanel( document.getElementById('example-2'), { onClick: e => { alert(e.index); alert(e.unified); } } );

Click me to toggle dialog // Create the panel before opening the dialog for quick opening // Though lazy creation also works and is blazing fast! (3ms) new EmojiPanel(document.getElementById('example-3')); // Toggle dialog document.getElementById('example-3-btn').addEventListener('click', () => { document.getElementById('example-3-container').classList.toggle('open'); });

Click me to open jQuery dialog new EmojiPanel(document.getElementById('example-4')); $('#example-4').dialog({ minWidth: 274, height: 800, width: 600 }); /* So the dialog won't be visible before opening, jQuery will override the `dispaly`*/ #example-4 { display: none; }