Balloon Launch Confetti
Balloon Launch Confetti is a React and Tailwind CSS effect component written for Uncode and yours to ship. Copy it and paste it into your project.
Uncode
effects
What it is
Balloon Launch Confetti is a React and Tailwind CSS effect component written for Uncode and yours to ship. Copy it and paste it into your project.
How to use it
Open it in the catalogue, press copy, and paste it into your project. The prompt you copy carries the code and the rules that tell your agent to reproduce it without changing anything.
Five free copies a month. No card.
Needs
npm i balloons-js
Licence
This component was written for this catalogue. It is yours to ship in client work and in products you sell, under the terms of use.
Balloon Launch Confetti
import * as React from "react"
import { cn } from "@/lib/utils"
import { balloons, textBalloons } from "balloons-js"
export interface BalloonsProps {
type?: "default" | "text"
text?: string
fontSize?: number
color?: string
className?: string
onLaunch?: () => void
}
const Balloons = React.forwardRef<HTMLDivElement, BalloonsProps>(
({ type = "default", text, fontSize = 120, color = "#000000", className, onLaunch }, ref) => {
const containerRef = React.useRef<HTMLDivElement>(null)
const launchAnimation = React.useCallback(() => {
if (type === "default") {
balloons()
} else if (type === "text" && text) {
textBalloons([
{
text,
fontSize,
color,
},
])
}
if (onLaunch) {
onLaunch()
}
}, [type, text, fontSize, color, onLaunch])
// Экспортируем метод запуска анимации
React.useImperativeHandle(ref, () => ({
launchAnimation,
...(containerRef.current || {})
}), [launchAnimation])
return <div ref={containerRef} className={cn("balloons-container", className)} />
}
)
Balloons.displayName = "Balloons"
export { Balloons }