DEV Community

loading...
Cover image for JS Confetti library with emojis ⚡️ 🎉

JS Confetti library with emojis ⚡️ 🎉

Vladimir Nikitin
Frontend developer working with React and TypeScript
・1 min read

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

Discussion (20)

Collapse
siddharthshyniben profile image
Siddharth

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

Collapse
loonywizard profile image
Vladimir Nikitin Author

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
myblood profile image
Alexandr Vasilyev

Я просто многократно нажал на кнопку, чтобы проверить, что призойдет, и в итоге браузер Via сломался=)

Collapse
loonywizard profile image
Vladimir Nikitin Author

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 Author

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
zdoten profile image
z.En

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 Author

Thanks! Will be waiting for your feedback

Collapse
ashkanmohammadi profile image
Amohammadi2

Woo! That's really nice!

Collapse
loonywizard profile image
Vladimir Nikitin Author

thank you!

Collapse
robertinoc_dev profile image
Robertino

Love it!

Collapse
barelyhuman profile image
Reaper

😂 amazing

Collapse
loonywizard profile image
Vladimir Nikitin Author

thanks!

Collapse
mohammedayman2018 profile image
Aymoon

Lol I got this idea yesterday now it's a real thing. Nice work 🔥