Confetti

1"use client";
2 
3import canvasConfetti, {
4  type Options as ConfettiOptions,
5} from "canvas-confetti";
6import * as React from "react";
7 
8export type { ConfettiOptions };
9 
10export type ConfettiHandle = {
11  /** Fire a burst. Options override the component defaults. */
12  fire: (options?: ConfettiOptions) => void;
13};
14 
15export type ConfettiButtonProps =
16  React.ButtonHTMLAttributes<HTMLButtonElement> & {
17    /** Confetti options applied to the burst on click. */
18    options?: ConfettiOptions;
19  };
20 
21const DEFAULTS: ConfettiOptions = {
22  spread: 70,
23  startVelocity: 45,
24  particleCount: 120,
25  origin: { y: 0.7 },
26  // Honor the Accessibility principle — canvas-confetti suppresses the burst
27  // when the user prefers reduced motion.
28  disableForReducedMotion: true,
29};
30 
31/**
32 * Imperative confetti. Hold a ref and call `ref.current.fire()` — mirrors the
33 * `toast()` ergonomics already used across GodUI.
34 */
35const Confetti = React.forwardRef<
36  ConfettiHandle,
37  { options?: ConfettiOptions }
38>(({ options }, ref) => {
39  React.useImperativeHandle(
40    ref,
41    () => ({
42      fire: (override?: ConfettiOptions) => {
43        canvasConfetti({ ...DEFAULTS, ...options, ...override });
44      },
45    }),
46    [options],
47  );
48  return null;
49});
50Confetti.displayName = "Confetti";
51 
52/** Convenience trigger: bursts from the button's position on click. */
53const ConfettiButton = React.forwardRef<HTMLButtonElement, ConfettiButtonProps>(
54  ({ options, onClick, children, ...props }, ref) => {
55    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
56      const rect = e.currentTarget.getBoundingClientRect();
57      const x = (rect.left + rect.width / 2) / window.innerWidth;
58      const y = (rect.top + rect.height / 2) / window.innerHeight;
59      canvasConfetti({ ...DEFAULTS, origin: { x, y }, ...options });
60      onClick?.(e);
61    };
62 
63    return (
64      <button
65        ref={ref}
66        type="button"
67        data-slot="confetti-button"
68        onClick={handleClick}
69        {...props}
70      >
71        {children}
72      </button>
73    );
74  },
75);
76ConfettiButton.displayName = "ConfettiButton";
77 
78/** Direct imperative API for non-React call sites. */
79function confetti(options?: ConfettiOptions) {
80  canvasConfetti({ ...DEFAULTS, ...options });
81}
82 
83export { Confetti, ConfettiButton, confetti };