react-canvas-confetti

import React, { useRef, useCallback, useState } from 'react'; import Fireworks from 'react-canvas-confetti/dist/presets/fireworks'; import type { TConductorInstance } from 'react-canvas-confetti'; function ConfettiDemo() { const conductorRef = useRef<TConductorInstance | null>(null); const [isRunning, setIsRunning] = useState(false); const onInit = useCallback(({ conductor }: { conductor: TConductorInstance }) => { conductorRef.current = conductor; // You could autorun here as well, but we'll use a button for demonstration // conductor.run({ speed: 2 }); // setIsRunning(true); }, []); const handleShootConfetti = useCallback(() => { if (conductorRef.current) { conductorRef.current.shoot(); } }, []); const handleRunAnimation = useCallback(() => { if (conductorRef.current) { conductorRef.current.run({ speed: 1.5, duration: 2000 }); setIsRunning(true); } }, []); const handleStopAnimation = useCallback(() => { if (conductorRef.current) { conductorRef.current.stop(); setIsRunning(false); } }, []); return ( <div> <h1>Confetti Show!</h1> <p>Click buttons to control the fireworks animation.</p> <button onClick={handleShootConfetti} style={{ margin: '10px', padding: '10px 20px' }}> Single Burst </button> <button onClick={handleRunAnimation} disabled={isRunning} style={{ margin: '10px', padding: '10px 20px' }}> Start Continuous </button> <button onClick={handleStopAnimation} disabled={!isRunning} style={{ margin: '10px', padding: '10px 20px' }}> Stop Continuous </button> {/* The Fireworks component will render the canvas */} <Fireworks onInit={onInit} autorun={false} /> <p style={{ marginTop: '20px' }}> This example demonstrates how to control the confetti animation manually using the `ConductorInstance` obtained via the `onInit` callback of the `Fireworks` preset component. It shows single bursts and continuous animation, offering full control over the visual effects. </p> </div> ); } export default ConfettiDemo;