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