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.

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      

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      

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/      

Comparison of React confetti libraries  

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!