![Emoji Button](https://user-images.githubusercontent.com/219285/88242435-2864b400-cc5b-11ea-9b77-b4574ad45f4c.png)


Vanilla JavaScript emoji picker 😎

## Screenshot

![Screenshot](https://user-images.githubusercontent.com/219285/88242157-690ffd80-cc5a-11ea-8b40-fc148d1f7eb7.png)


## Demo and Documentation

[https://emoji-button.js.org](https://emoji-button.js.org)

## Features

* 💻 Vanilla JS, use with any framework
* 😀 Use native or Twemoji emojis
* 🔎 Emoji search
* 👍🏼 Skin tone variations
* ⏱ Recently used emojis
* ⌨️ Fully keyboard accessible
* 🎨 Dark, light, and auto themes
* ⚙️ Add your own custom emoji images
* 🧩 Extend functionality with plugins

## Browser support

Emoji Button is supported on all modern browsers supporting the latest JavaScript features. Internet Explorer is not supported.

## Installation

If you are using a package manager like `yarn` or `npm`, you can install Emoji Button directly from the npm registry:

    npm install @joeattardi/emoji-button

## Basic usage

First, you'll need a trigger element. This is typically a button, and is used to toggle the emoji picker.

```html
<button id="emoji-trigger">Emoji</button>
```

Once you've added the trigger, you will need to import the `EmojiButton` class and create a new instance. Various options can be passed to the constructor, which is covered in the [API documentation](https://emoji-button.js.org/docs/api). 

After constructing a picker, it can be shown by calling `showPicker` or `togglePicker` on it. These functions expect a reference element as a parameter. The picker is positioned relative to this reference element.

When an emoji is selected, the picker will emit an `emoji` event, passing an object containing data about the emoji that was selected. You can then handle the selected emoji however you want.

For more in depth documentation and examples, please visit [https://emoji-button.js.org](https://emoji-button.js.org).

```javascript
import { EmojiButton } from '@joeattardi/emoji-button';

const picker = new EmojiButton();
const trigger = document.querySelector('#emoji-trigger');

picker.on('emoji', selection => {
  // handle the selected emoji here
  console.log(selection.emoji);
});

trigger.addEventListener('click', () => picker.togglePicker(trigger));
```

## Development

The easiest way to hack on Emoji Button is to use the documentation site. First, you should fork this repository.

### Clone the forked repository

    git clone https://github.com/your-name/emoji-button.git

### From the repository root

#### Install dependencies

    npm install

#### Set up the link

    npm link

#### Start the build/watch loop

    npm run build:watch

### From the `site` subdirectory

#### Install dependencies

    npm install

#### Link the library

    npm link @joeattardi/emoji-button

#### Start the documentation site

    npm run develop

### Open the page

http://localhost:8000