lightweight-emoji-picker

Lightweight emoji picker

This emoji picker has only what you need, and it's size wights less than 250KB including styles and the icons. This picker uses the emojilib from muan: https://github.com/muan/emojilib

Demo

Usage

With npm

npm install lightweight-emoji-picker --save

Without npm

Download the dist/picker.js file from this repository and load it into your website.

Setup

var picker=new EmojiPicker(TargetEl: HTMLNode, Callback: Function, [Language: string, [recommendedEmojis: Array]]);

• TargetEl: HTML Element to display the picker at, will append the picker to the DOM after this element, and position it next to the element by absolute positioning

• Calback: A function that is called when an emoji is choosen. Will receive one parameter with the following data:

  {
    category: (String)categoryName,
    char: (String)the Character,
    keywords: (Array)Array with keywords
  }
  

• Language: Language to display phrases. Possible values en and de

• recommendedEmojis: An array with emojis to display in the special "recommended" category at the top of emoji list. Values have to be the keys from the emoji lib: https://github.com/muan/emojilib/blob/master/emojis.json

Showing / Hiding the picker

There a three methods you can use:

picker.toggle(); // toggles the visible state of the picker
picker.show(); // shows the picker
picker.hide(); // hides the picker