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
 
hinasoftwareengineer profile image
Hina-softwareEngineer

Many many congratulations 😍

Collapse
 
khvnkay profile image
kk

Thanks, I will try :D

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...

Collapse
 
wobsoriano profile image
Robert

Starred! Will use on my future projects.

Collapse
 
adnanbabakan profile image
Adnan Babakan (he/him)

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

Collapse
 
moroysn profile image
y

Starred!