better-react-confetti · v0.1.0

React confetti without a DOM node for every particle.

better-react-confetti is a lightweight, canvas-based React confetti component for success states, launches, milestones, and one-time celebration bursts. It supports React 18 and React 19, ships TypeScript declarations, and keeps animation work in one canvas and one requestAnimationFrame loop.

• One canvas
• React 18 + 19
• TypeScript types
• Built-in shapes

Live React confetti demo

This is a one-time burst with 120 particles, five colors, and recycling disabled. Trigger it again to remount the component and start a fresh celebration.

Why use canvas for React confetti?

React confetti example

Place the component inside a positioned container. Set recycle to false for a finite burst, and remount it when another celebration should begin.

import Confetti, { Circle, Rectangle, Triangle } from "better-react-confetti";

export function SuccessMoment() {
  const shapes = [
    <Rectangle key="rectangle" color="#f0c66a" />,
    <Circle key="circle" color="#ef5da8" />,
    <Triangle key="triangle" color="#34a7dc" />,
  ];

  return (
    <div className="celebration-stage">
      <Confetti
        total={140}
        Component={shapes}
        gravity={0.28}
        speed={1.1}
        recycle={false}
        aria-hidden="true"
      />
      <p>Payment complete</p>
    </div>
  );
}

React confetti component API

Standard div attributes also pass through to the wrapper, so className, style, and accessibility attributes can be applied normally.

Use celebration effects accessibly

import { useEffect, useState } from "react";

function useReducedMotion() {
  const [reduceMotion, setReduceMotion] = useState(false);

  useEffect(() => {
    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
    const update = () => setReduceMotion(media.matches);

    update();
    media.addEventListener("change", update);
    return () => media.removeEventListener("change", update);
  }, []);

  return reduceMotion;
}

const reduceMotion = useReducedMotion();

return success && !reduceMotion ? (
  <Confetti recycle={false} aria-hidden="true" />
) : null;

React confetti FAQ

Add a focused celebration to your React app.

Install better-react-confetti from npm, or explore another small React package built around a narrow, practical job.