Archived: The maintainance of this stopped. Emoji-mart itself now has/is a pure JS/CSS solution that can be embedded, so this is no longer needed.

emoji-mart-embed

Provides emoji-mart, so it can be used in plain JavaScript. This uses remount and preact.

In the end, you just have a custom element:

<emoji-picker></emoji-picker>

Building

npm install
npm run build

For your convenience, the finished files are written into the dist dir. All Emoji JSON data is included in the JS, and there is also the CSS file.

To generate a file of all used licenses of the dependencies, do run:

npm install npm-license-text
npx npm-license-text . THIRD_PARTY_LICENSES.md

Usage

Include the JS and CSS.

EmojiPicker

Then, you can define the emoji-mart EmojiPicker like this:

window.emojiMart.definePicker("emoji-picker", {
     native: true,
     emojiTooltip: true,
});

You can pass in a JSON, which is directly passed to the picker of emoji-mart (only some little defaults are provided).

Afterwards, you can create the HTML custom element:

const picker = document.createElement("emoji-picker");
document.body.appendChild(picker);

Headless search

As with upstream you can use the emoji-index. Just use window.emojiMart.emojiIndex instead.

Get emoji data from Native

Basically the same as the upstream project, just use window.emojiMart.getEmojiDataFromNative instead.

TODO: Needs testing!

Storage

It also exposes the storage of emoji-mart, so you can use it in the same way as the original docs:

window.emojiMart.setDataStore("emoji-picker", {
    getter: (key) => {
        // Get from your own storage (sync)
    },

    setter: (key, value) => {
        // Persist in your own storage (can be async)
    }
});

Credits

Loosely based on https://github.com/nolanlawson/emoji-mart-outside-react, so thanks to @nolanlawson.