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