How to create confetti in React JS

In this article, I will show you the easy and simple way to create confetti in React.

First, install the following dependency:

npm i canvas-confetti

After installing the above package, import it into your React application:

import confetti from 'canvas-confetti';

To create confetti using the package, create the following function:

const handleConfetti = () => {
    confetti();
 };

Now create a button with the onClick event:

<button onClick={handleConfetti}>Show Confetti</button>

This will create amazing and satisfying confetti 🎉.

Try clicking the button below:

import React from 'react';
import './style.css';
import confetti from 'canvas-confetti';

export default function App() {
const handleConfetti = () => {
    confetti({
    particleCount: 250,
    spread: 120,
    });
};
return (
    <div>
        <button onClick={handleConfetti}>Show Confetti</button>
    </div>
);
}

Thanks for reading

Follow me on Twitter

Thanks for reading!