Frontend Blocks
typescript
Intermediate
Canvas Confetti on Success
Trigger a canvas-confetti burst when a user completes an action.
typescript
import confetti from "canvas-confetti";
export function celebrate() {
confetti({
particleCount: 120,
spread: 80,
origin: { y: 0.6 },
colors: ["#22c55e", "#16a34a", "#4ade80"],
});
}
// Usage: call celebrate() after a successful donation
document.getElementById("pay-btn")?.addEventListener("click", celebrate);Prerequisites
- canvas-confetti >= 1.9
Pro Tips
- → Wrap in a try/catch — canvas may be blocked by strict CSP.
Commercial Licensing
Acquire a production access token or template license for enterprise deployment.
Module Info
- Language
- typescript
- Level
- Intermediate
- Read time
- 1 min
- Published
- Jul 2026
- License
- Commercial License
Newsletter
New modules every week, directly to your inbox.
Similar Modules
Copy to Clipboard Button
React component that copies text to clipboard and shows a Copied! confirmation.
typescript
·
Beginner
Framer Motion Fade-In Wrapper
Reusable component that fades any child element in on mount.
typescript
·
Beginner
Compound Component Pattern
Implement a flexible Tabs component using React Context and compound component pattern.
typescript
·
Intermediate