DEV Community

Cover image for Emoji Button: 400 ⭐️ stars on GitHub!

Emoji Button: 400 ⭐️ stars on GitHub!

Joe Attardi on March 09, 2020

My pet project, Emoji Button, has just passed 400 stars on GitHub! Emoji Button is a vanilla JavaScript emoji picker component that can be dropped...
Collapse
 
yuanhao profile image
YuanHao Chiang • • Edited

Nice! 400 is amazing. Just added your 417th star 😉 I really like how sleek it is and vanilla coded libraries are a real treat nowadays.

One small detail, on Firefox, contenteditable has some sort of weird height issue (MacOS and Windows):

firefoxBug

This can be easily fixed with a zero-width non-breaking space:

*[contenteditable]:empty:before
{
    content: "\feff";
}

I ran into this with my pet Markdown Table project. I was looking to add an Emoji component, I will try out yours!

Collapse
 
joeattardi profile image
Joe Attardi •

Thanks for the heads up! I will fix the demo site so that it displays correctly in Firefox.

Collapse
 
crimsonmed profile image
Médéric Burlet •

Looks awesome congrats man!

Do be careful I think there are a few issues on firefox where the cursor is bigger than the textbox.

I would also say add an option to have the emoji panel open on textbox focus.

Spacer Bigger

Collapse
 
joeattardi profile image
Joe Attardi •

Oops, yes, I need to fix that Firefox issue. However, that is an issue with the demo site only - not the library itself.

Emoji Button is a very generic library - it doesn't dictate how you show it. The text boxes are just an example. You can call showPicker() when a button is clicked, as in the demo, or you can also call it when the text box is focused, as you suggested.

Thanks for taking a look!

Collapse
 
ben profile image
Ben Halpern •

Congrats!

Collapse
 
joeattardi profile image
Joe Attardi •

Thank you!

Collapse
 
khvnkay profile image
kk •

Thanks, I will try :D

Collapse
 
hinasoftwareengineer profile image
Hina-softwareEngineer •

Many many congratulations 😍

Collapse
 
adnanbabakan profile image
Adnan Babakan (he/him) •

Congrats! And you got a star from me as well!

Collapse
 
wobsoriano profile image
Robert •

Starred! Will use on my future projects.

Collapse
 
moroysn profile image
y •

Starred!

Collapse
 
olton profile image
Serhii Pimenov • • Edited

why dropdown list dropped on right side? on mobile this not good.

Collapse
 
joeattardi profile image
Joe Attardi •

Thanks for the feedback!

The right side is only the default. You can specify any position you wish via the position option! See the docs for details: github.com/joeattardi/emoji-button...