Blog>>Software development>>Frontend>>React confetti — let’s celebrate with JavaScript libraries!

React confetti — let’s celebrate with JavaScript libraries!

Anniversaries, big and small achievements, public or religious holidays. We are looking for opportunities to celebrate them in our lives, as it gives us joy and happiness. It can be useful and fun to include this experience even in an otherwise ‘Very Serious And Important Application’.

This article will focus on the confetti effect – how can you create it, what solutions can be helpful, and if it is a real thing to celebrate. In the text, you will also find code examples to make this journey more enjoyable! 

Why don't you throw a party?

In my first commercial project, I was assigned the task of creating a confetti effect to celebrate the accomplishment of particular steps in an application. I dived into the Internet Ocean of Possibilities and want to share my findings with you.

Also, don't forget to check out the top frontend trends of 2023.

Get this party started with React confetti

Generating the confetti effect from scratch would be pretty complicated. Lucky for us, out there in the wild, there exist a few JS libraries that make it easy to implement it in your app. Let me compare some of those, discuss their pros and cons, and find possible use cases for each.

Services Frontend development

Round one – confetti-js

Let us get our hands dirty with confetti-js. This is a vanilla JS library, which means that you can use it with any framework you want, but you might notice it makes it a little bit more complicated to use with user interactions in React, as you have to wrap initialization with useEffect.

import {useEffect, useState} from 'react';
import ConfettiGenerator from 'confetti-js';
 
const ConfettiCanvas = () => {
  useEffect(() => {
    const confettiSettings = {
      target: 'confetti-canvas'
    };
    const confetti = new ConfettiGenerator(confettiSettings);
    confetti.render();
 
    return () => confetti.clear();
  }, []);
  return <canvas id='confetti-canvas' />;
};
 
export const ConfettiJS = () => {
  const [isConfetti, setIsConfetti] = useState(false);
 
  const toggleConfetti = () => {
    setIsConfetti(prev => !prev);
  };
  return (
    <div className='container'>
      <button onClick={toggleConfetti}>{isConfetti ? 'Clear confetti' : 'Render confetti'}</button>
      {isConfetti && <ConfettiCanvas />}
    </div>
  );
};

Link to CodeSandbox      link-icon

Confetti-js is highly customizable, you can not only set colors or speed, but it is also possible to pass SVG to serve as a particle pattern, which is cool.

Discover our custom software development services and our React development services.

Let's get back to the party...

...party.js, to be precise. It's another framework-agnostic package that you can use to power up your celebration. It's much easier to use in React:

import party from 'party-js';
 
const Party = () => {
  return <button onClick={e => party.confetti(e.target)}>Party!</button>;
};

Link to CodeSandbox      link-icon

The effect is different from that of confetti-js, which gave us confetti falling from the top of the container. party.js confetti mimics blown confetti and is convenient to celebrate success in one of the few entities that happened to be my use case. It is also easy to separate the event trigger from the confetti target, which may be handy in many cases. 

tsParticles – the big one? 

Both the aforementioned packages are pretty easy to use, you can customize their appearance, but you can also use default settings to do the job for you. tsParticles approach is different. It gives some presets (not only for confetti, this package is really powerful and able to create different kinds of particle effects), but you must first install presets dependency and initialize particles, then pass it config props to the Particles component (tsParticles is pure JS library, but it also delivers components for many other libraries, including React). You can also specify custom config, but if I attached a full config object, this article would be three times bigger.

import {useState} from 'react';
import Particles from 'react-particles';
import {loadConfettiPreset} from 'tsparticles-preset-confetti';
 
export const TsParticles = () => {
  const [isConfetti, setIsConfetti] = useState(false);
 
  return (
    <div className='container'>
      <button onClick={() => setIsConfetti(true)} disabled={isConfetti}>
        Render confetti
      </button>
      {isConfetti && <Particles id='tsparticles' init={loadConfettiPreset} options={{preset: 'confetti'}} />}
    </div>
  );
};

Link to CodeSandbox: https://t31sni.csb.app/      link-icon

Comparison of React confetti libraries  

confetti-jsparty.jstsParticles
framework-agnosticYESYESYES
more than confettiNOYES, sparklesYES, a lot more
confetti stylerainexplosionexplosion, but can be mixed with falling
attachmentyou must define canvasany elementcreates own container
easy to use in reactionhardeasymedium

Is there one solution that is best?

As always, no. The best solution depends on the particular use case. If you need to celebrate one of many possible successes in one view, party.js might be the easiest solution, while for one big celebration the confetti rain provided by confetti-js seems more suitable. tsParticles is the most powerful, but the learning curve is probably steeper, so while it might not be a quick-win solution, when you need more particle-oriented effects, it may be your best choice.

Whatever you choose - enjoy it and make sure to bring some celebration to your everyday life!

Skrzeczyński Sławomir

Sławomir Skrzeczyński

Frontend Engineer

Sławomir Skrzeczyński is a frontend engineer and author on CodiLime's blog. Check out the author's articles on the blog.Read about author >

Read also

Get your project estimate

For businesses that need support in their software or network engineering projects, please fill in the form and we’ll get back to you within one business day.

For businesses that need support in their software or network engineering projects, please fill in the form and we’ll get back to you within one business day.

We guarantee 100% privacy.

Trusted by leaders:

Cisco Systems
Palo Alto Services
Equinix
Jupiter Networks
Nutanix