react-canvas-confetti

react-canvas-confetti is a React component wrapper around the canvas-confetti library, offering both ready-to-use animation presets (fireworks, snow, pride, realistic, vortex, and more) and direct access to the underlying canvas-confetti instance for fully custom animations.

Presets can be dropped in with a single autorun prop for the simplest case, or controlled imperatively via a Conductor instance (run, shoot, pause, stop) exposed through an onInit callback — giving developers a choice between zero-config celebration effects and low-level animation control.

What You Get

• Eight ready-made animation presets: fireworks, crossfire, explosion, photons, pride, realistic, snow, and vortex
• An autorun prop to start a preset animation automatically on mount with configurable speed/duration/delay
• A Conductor instance (run, shoot, pause, stop) for imperative, on-demand control of preset animations
• Direct access to the underlying canvas-confetti instance via onInit for building fully custom particle animations
• decorateOptions callback for customizing per-step animation options within a preset

Common Use Cases

• Celebrating a successful checkout, form submission, or achievement with a confetti burst
• Adding a festive snow or fireworks effect to a seasonal landing page or event site
• Triggering a custom particle animation on a specific user interaction (button click, milestone reached)
• Building a gamified UI where in-app achievements or level-ups trigger celebratory canvas animations

Under The Hood

Architecture: the package wraps src/index.tsx (a canvas-rendering React component that creates and manages a <canvas> element and instantiates canvas-confetti against it) around a presets/ directory where each preset (fireworks, snow, pride, etc.) is its own module composing the base component with predefined decorateOptions animation logic; a conductor/ module implements the imperative run/shoot/pause/stop API that presets expose via onInit, and a types/ directory carries the shared TypeScript contracts. Tech Stack: TypeScript (82%) with a thin JavaScript/CSS layer for the demo site, built on canvas-confetti as its core dependency and React as a peer dependency. Code Quality: the repository is small and focused, with each preset isolated in its own folder for easy review, though it has seen very little maintenance activity since its last release and has a small contributor base (4 total). API Design: the two-tier API — simple presets for common cases, a full conductor/confetti instance for advanced cases — lets developers start with a single JSX prop (<Fireworks autorun={{ speed: 3 }} />) and only reach for the lower-level API when they need custom animation logic; the README documents every prop with a table and links to live CodePen examples for each preset.