Confetti-cannons NPM

🎉 confetti-cannons 🎉

Github

https://github.com/sjlevens/confetti-cannon

Elevate your web celebrations!

Looking to bring some extra sparkle and joy to your web application? Want to surprise your users with a virtual celebration they'll never forget? confetti-cannons is here to make your web festivities unforgettable! With just one line of code, shower your web application with confetti 🎊

Installation

npm install confetti-cannons

Usage

It's simple! Import and fire away:

import confetti from "confetti-cannons";

// Whenever you want to celebrate
confetti();

This will blast confetti particles from the bottom of your screen. Who knew joy could be so few kb? 😄

Event Listener

import confetti from "confetti-cannons";

document.addEventListener("DOMContentLoaded", () => {
  const button = document.getElementById("celebrateButton");
  button.addEventListener("click", () => {
    confetti();
  });
});

Spawn from a cursor click!

import { attachConfettiToCursorClick } from "confetti-cannons";

attachConfettiToCursorClick();

React button handler

import React from "react";
import confetti from "confetti-cannons";

const CelebrationButton = () => {
  const handleButtonClick = () => {
    confetti();
  };

  return <button onClick={handleButtonClick}>Click me for Confetti!</button>;
};

export default CelebrationButton;

React useEffect Example

import React, { useEffect } from "react";
import confetti from "confetti-cannons";

const CelebrateOnLoad = () => {
  useEffect(() => {
    confetti();
  }, []); // Empty dependency array ensures it only fires once, on initial render

  return (
    <div>
      <h1>Welcome to the Party!</h1>
    </div>
  );
};

export default CelebrateOnLoad;

Options

You can customise the intensity and other configurations:

type Options = {
  zIndex?: number,
  cannonSpawns?: number[][],
  spread?: "cone" | "fountain",
};

// Blast with custom intensity and z-index
confetti(50, { zIndex: 1000 });

// This will place your confetti behind everything (careful if you use it in a drawer!)
confetti(50, { zIndex: -1 });

// Blast from specific cannon spawns (an array of 2d points)
confetti(20, { cannonSpawns: [[-0.5, 0.5]] });

How it Works

Under the hood, confetti-cannons uses WebGL to render performant confetti particles on your screen. Different shapes and colours add to the variety!