useConfetti

import { useConfetti } from "@/hooks/use-confetti";

function MyComponent() {
  const triggerConfetti = useConfetti();

  return <button onClick={() => triggerConfetti()}>Celebrate! 🎉</button>;
}

import { useConfetti } from "@/hooks/use-confetti";

function BasicExample() {
  const triggerConfetti = useConfetti();

  return <button onClick={() => triggerConfetti()}>Trigger Confetti</button>;
}

import { useConfetti } from "@/hooks/use-confetti";

function CustomParticleCount() {
  const triggerConfetti = useConfetti();

  return (
    <button onClick={() => triggerConfetti({ particleCount: 100 })}>
      More Confetti!
    </button>
  );
}

import { useConfetti } from "@/hooks/use-confetti";

function DifferentOrigins() {
  const triggerConfetti = useConfetti();

  return (
    <div className="flex gap-4">
      <button onClick={() => triggerConfetti({ origin: "top" })}>
        From Top
      </button>
      <button onClick={() => triggerConfetti({ origin: "bottom" })}>
        From Bottom
      </button>
      <button onClick={() => triggerConfetti({ origin: "left" })}>
        From Left
      </button>
      <button onClick={() => triggerConfetti({ origin: "right" })}>
        From Right
      </button>
    </div>
  );
}

import { useConfetti } from "@/hooks/use-confetti";

function CustomDuration() {
  const triggerConfetti = useConfetti();

  return (
    <button onClick={() => triggerConfetti({ duration: 5000 })}>
      Long Celebration (5s)
    </button>
  );
}