EmojiPanel

EmojiPanel is a Javascript emoji picker that used to
be a popular Chrome extension for Twitter!

Select and write emoji using any sprite sheet
Keep track of users frequently used emojis
Lots of options & customisable SCSS styles
Listen for events such as select or search
43kb ~ 12kb gzipped

Get Started

npm i emojipanel

Static mode

The container is the element that the panel is appended to, it is required. By not
specifying a trigger, the panel will always be visible, as shown above.

new EmojiPanel({
        container: '#container'
    });

Trigger mode

In trigger mode, the EmojiPanel is hidden until triggered by a button or manually with toggle().
Set trigger to true to allow the panel to be manually triggered. Trigger example

new EmojiPanel({
        container: '#container',
        trigger: '#btn-trigger'
    });

ContentEditable

The panel can add emoji characters to a text input or contenteditable element.

new EmojiPanel({
        container: '#container',
        editable: '#input'
    });

Options

Option	Default	Description
search	`true`	Enable the search feature
frequent	`true`	Enable the frequently used feature
fitzpatrick	`'a'`	The initial skin tone modifier. Set to false to disable
hidden_categories	`[]`	Hide certain emoji categories from the results
pack_url		URL to the Emoji sprites
json_url	`'/emojis.json'`	URL to the Emojis JSON file
tether	`true`	Whether to tether the panel to the trigger
placement	`'bottom'`	How the dropdown should be tethered: `top`, `right`, `bottom`, `left`
locale	`{}`	See Translations
icons	`{}`	The elements to use as icons: `search`

Methods

toggle - Manually trigger the panel
reposition - Realign the panel's tether to the trigger

Translations

Set the locale object in options to change the translations for:

add - Add emoji
brand - EmojiPanel - Remove watermark with ''
frequent - Frequently used
loading - Loading...
no_results - No results
search - Search
search_results - Search results