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: imageSet:

        
<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);
    }
  }
);

        
// 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');
});

        
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;
}

        
new EmojiPanel(document.getElementById('example-5'), {
  animationDuration: 1000 // 300ms default
});