DEV Community

Cover image for JS Confetti library with emojis โšก๏ธ ๐ŸŽ‰
Vladimir Nikitin
Vladimir Nikitin

Posted on

JS Confetti library with emojis โšก๏ธ ๐ŸŽ‰

Hi everyone!

Happy to announce, that my library js-confetti now supports emojis!

Please look at README for instructions for Installation & Usage

All you need is to provide emojis array to addConfetti method:

import JSConfetti from 'js-confetti'

const jsConfetti = new JSConfetti()

// different emojis
jsConfetti.addConfetti({
   emojis: ['๐ŸŒˆ', 'โšก๏ธ', '๐Ÿ’ฅ', 'โœจ', '๐Ÿ’ซ', '๐ŸŒธ'],
})

// confetti from only unicorn emojis
jsConfetti.addConfetti({
  emojis: ['๐Ÿฆ„'],
})

// different arguments in .addConfetti
jsConfetti.addConfetti({
  emojis: ['โœจ', '๐Ÿ’ซ'],
  emojiSize: 100,
  confettiNumber: 30,
})
Enter fullscreen mode Exit fullscreen mode

You can see demo here ๐Ÿš€

I will be happy if this will be useful for anybody!

Feel free to add Issues for feature-requests / bugs

Top comments (21)

Collapse
 
siddharthshyniben profile image
Siddharth

I was just thinking: what if we added text in the emojis array?

Collapse
 
loonywizard profile image
Vladimir Nikitin

You will get something like this ๐Ÿ˜„

Collapse
 
siddharthshyniben profile image
Siddharth

That's awesome! You could just make it a new feature, and you don't have to change a thing!

Collapse
 
adam_cyclones profile image
Adam Crockett ๐ŸŒ€

But what if you add numbers?

Thread Thread
 
siddharthshyniben profile image
Siddharth

What if you add words? It would be fun to see lorem ipsum flying around!

Collapse
 
adam_cyclones profile image
Adam Crockett ๐ŸŒ€

I didn't need this until I saw it.

Collapse
 
robertinoc_dev profile image
Robertino

Love it!

Collapse
 
myblood profile image
Alexandr Vasilyev

ะฏ ะฟั€ะพัั‚ะพ ะผะฝะพะณะพะบั€ะฐั‚ะฝะพ ะฝะฐะถะฐะป ะฝะฐ ะบะฝะพะฟะบัƒ, ั‡ั‚ะพะฑั‹ ะฟั€ะพะฒะตั€ะธั‚ัŒ, ั‡ั‚ะพ ะฟั€ะธะทะพะนะดะตั‚, ะธ ะฒ ะธั‚ะพะณะต ะฑั€ะฐัƒะทะตั€ Via ัะปะพะผะฐะปัั=)

Collapse
 
loonywizard profile image
Vladimir Nikitin

Hi! can you please share error from browser console?
Or is it just stopped working without any error?

Collapse
 
myblood profile image
Alexandr Vasilyev

ะฏ ะฝะต ะฟั€ะพะฒะตั€ัะป ะฝะฐ ะพัˆะธะฑะบะธ. ะ•ัะปะธ ัั‚ะพ ะพั‡ะตะฝัŒ ะฒะฐะถะฝะพ, ั ะผะพะณัƒ ะฟะพะฒั‚ะพั€ะธั‚ัŒ ัั‚ะพ

Thread Thread
 
loonywizard profile image
Vladimir Nikitin

is Via only mobile browser? I don't think I can debug this(

I checked on mobile Safari and mobile Android Browser, it was working OK

Collapse
 
mrzenw profile image
MrZenW

I was about to make something like this. Thank you for saving my time.

Collapse
 
danilo profile image
Danilo Cรฉsar

Good work! Thank you for sharing the library. I'll try to implement it on my next project.

Collapse
 
hasnaindev profile image
Muhammad Hasnain

Thank you for creating this! I'll be looking into this soon and share my experience.

Collapse
 
loonywizard profile image
Vladimir Nikitin

Thanks! Will be waiting for your feedback

Collapse
 
ashkanmohammadi profile image
Amohammadi2

Woo! That's really nice!

Collapse
 
loonywizard profile image
Vladimir Nikitin

thank you!

Collapse
 
barelyhuman profile image
Reaper

๐Ÿ˜‚ amazing

Collapse
 
loonywizard profile image
Vladimir Nikitin

thanks!

Collapse
 
purushothamreddyn profile image
PURUSHOTHAM REDDY

can we control the speed

Collapse
 
mohammedayman2018 profile image
Aymoon

Lol I got this idea yesterday now it's a real thing. Nice work ๐Ÿ”ฅ