React package · v0.1.0

better-react-confetti

A lightweight canvas-based confetti layer for React apps. Useful for small celebration moments without asking React or the DOM to manage every particle.

View on npm Read the write-up More things I have made

Why it exists

Celebration effects are nice when they mark real progress, but many confetti libraries bring more machinery than the moment needs. This package keeps the API small, renders through one canvas, and exposes simple props for color, shape, gravity, wind, speed, and recycling.

Install

pnpm add better-react-confetti

Use

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 (
    <Confetti
      total={140}
      colors={["#f0c66a", "#ef5da8", "#34a7dc"]}
      Component={shapes}
      recycle={false}
    />
  );
}

What it is good at

· Canvas-based particle rendering
· Built-in rectangle, circle, and triangle shapes
· Configurable colors, gravity, wind, speed, and recycling
· React 18 and React 19 peer support
· Small celebration effects for product moments that deserve feedback