DEV Community

Joe Attardi
Joe Attardi

Posted on • Updated on

Emoji Button, a vanilla JavaScript emoji picker

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!

Top comments (12)

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

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

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

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

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!

Collapse
 
bestfriend101 profile image
BestFriend101

Appreciate all the hard work, can't wait to try!

Collapse
 
strangebs profile image
Stephen Strange

It's very good and I think it needs a simple copy button

Collapse
 
spsarola profile image
spsarola

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