DEV Community

loading...

Emoji Button, a vanilla JavaScript emoji picker

joeattardi profile image Joe Attardi Updated on ・1 min read

Emoji Button screenshot

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!

Discussion (9)

pic
Editor guide
Collapse
fzwael profile image
Wael Fezai

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

Collapse
joeattardi profile image
Joe Attardi Author

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/

Collapse
fzwael profile image
Wael Fezai

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.

Thread Thread
joeattardi profile image
Joe Attardi Author

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!

Thread Thread
fzwael profile image
Wael Fezai

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.

Thread Thread
joeattardi profile image
Joe Attardi Author

Nice! I was thinking about creating a React wrapper at some point, as well. Might drive better adoption if the integration is already done :)

Collapse
qortex profile image
Michael Monerau

This is truly brilliant!

Perfect-looking, integrate in a minute. Wow.

Collapse
joeattardi profile image
Joe Attardi Author

Thank you very much!

Collapse
frontend_io profile image
Jefferson Osagie Iyobosa

Just checked out the codebase of the emoji picker 🤯🤯🤯. That's alot of code. Great job man.
And the work is great!