After playing with React, Svelte, and Angular over the past year, I wanted to try to build something in vanilla JavaScript. I previously built an emoji picker for Svelte, so I thought I would adapt that to plain JavaScript. The result was Emoji Button.
Emoji Button is a plain JavaScript emoji picker that can be used in any JavaScript application, regardless of framework.
You call the EmojiButton function passing a HTML button element, and a callback. Clicking the button will trigger the emoji picker, and when an emoji is picked, the callback will be executed with the selected emoji.
Some of its features include:
- Skin tone variations
- Emoji search
- Saves recently used emojis
It was a bit more challenging building this with vanilla JavaScript without the tools of templating, reactivity, and data binding. All in all, it was a fun project, and hopefully someone out there will find it useful!
- Demo here: https://joeattardi.github.io/emoji-button/
- GitHub project: https://github.com/joeattardi/emoji-button
- npm package: https://www.npmjs.com/package/@joeattardi/emoji-button
Oldest comments (12)
Just checked out the codebase of the emoji picker 🤯🤯🤯. That's alot of code. Great job man.
And the work is great!
This is truly brilliant!
Perfect-looking, integrate in a minute. Wow.
Thank you very much!
Great work! Looks really amazing :)
I just have one question, every emoji is a png file right ?
Isn't it easier to put all the images in one font using something like : icomoon.io
The answer to your question is "it depends".
With the latest version, Emoji Button has two modes: native emojis, or Twemojis.
If you use the native style, it uses the actual emoji glyphs from your operating system, no pngs or images of any kind, just the raw Unicode sequences rendered by the system font.
If you use Twemoji style, then yes, each emoji is an image. Twemoji doesn't support sprite sheets that I know of so they use individual images.
The problem with an icon font is that they typically can only have one color, as far as I know.
Anyway, thanks for the comment and feel free to check out the latest version at emoji-button.js.org/
Got you! thanks :)
I'm on it, I'm trying to add it to Quilljs, I will let you know how it goes.
Thanks again for the amazing work.
Awesome! Good luck with the integration. Let me know if you need any help or changes on my end to make it work.
Thanks again for checking out the project!
Hello Joe,
I just want to let you know it worked as expected with Angular & Quill :D
I actually ended up created an Angular wrapper for your picker => github.com/Fzwael/ngx-emoji-button (it's still in first stage)
Thanks again for your help.
Nice! I was thinking about creating a React wrapper at some point, as well. Might drive better adoption if the integration is already done :)
There wasn't a demo for simple HTML. I don't want to use npm is there a way to use with plain HTML please help me
It's very good and I think it needs a simple copy button
Appreciate all the hard work, can't wait to try!