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.
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>npm install
npm run buildFor 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
Include the JS and CSS.
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);As with upstream you can use the emoji-index. Just use window.emojiMart.emojiIndex instead.
Basically the same as the upstream project, just use window.emojiMart.getEmojiDataFromNative instead.
TODO: Needs testing!
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)
}
});Loosely based on https://github.com/nolanlawson/emoji-mart-outside-react, so thanks to @nolanlawson.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent