{"library":"react-confetti","title":"React Confetti Component","description":"react-confetti is a React component designed to easily add customizable confetti effects to web applications. It provides a declarative way to render a shower of confetti, suitable for celebrations, achievements, or any event requiring a festive visual flourish. The current stable version is 6.4.0, with the project demonstrating an active release cadence, including multiple updates in early 2025 to add features, fix bugs, and ensure compatibility with newer React versions. Key differentiators include its simplicity as a React component, comprehensive TypeScript type definitions, and highly configurable properties such as `width`, `height`, `numberOfPieces`, and `confettiSource`. It's built to run efficiently in the browser, focusing solely on the visual confetti effect without external dependencies for physics or animation beyond what React and the browser provide, making it lightweight and easy to integrate.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-confetti"],"cli":null},"imports":["import Confetti from 'react-confetti'","import type { IConfettiOptions } from 'react-confetti'","const Confetti = require('react-confetti').default;"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState, useEffect } from 'react';\nimport Confetti from 'react-confetti';\n\n// A simple hook to get window dimensions for demonstration\nconst useWindowSize = () => {\n  const [windowSize, setWindowSize] = useState({\n    width: window.innerWidth,\n    height: window.innerHeight,\n  });\n\n  useEffect(() => {\n    const handleResize = () => {\n      setWindowSize({\n        width: window.innerWidth,\n        height: window.innerHeight,\n      });\n    };\n\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  return windowSize;\n};\n\nexport default function MyConfettiComponent() {\n  const { width, height } = useWindowSize();\n  const [showConfetti, setShowConfetti] = useState(true);\n\n  // Stop confetti after 10 seconds for demonstration\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setShowConfetti(false);\n    }, 10000); // Confetti will stop after 10 seconds\n    return () => clearTimeout(timer);\n  }, []);\n\n  return (\n    <div style={{ position: 'relative', width: '100vw', height: '100vh', overflow: 'hidden' }}>\n      <h1 style={{ textAlign: 'center', marginTop: '50px', color: '#673ab7' }}>Congratulations!</h1>\n      <p style={{ textAlign: 'center', color: '#3f51b5' }}>This is a celebration with react-confetti.</p>\n      {showConfetti && (\n        <Confetti\n          width={width}\n          height={height}\n          numberOfPieces={500}\n          recycle={false} // Confetti will stop falling after all pieces have fallen once\n          tweenDuration={2000} // Smooth transition for stopping\n          gravity={0.1} // Lighter gravity for longer fall\n          wind={0.05} // Slight wind effect\n          colors={['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5']} // Custom colors\n          initialVelocityX={{ min: -10, max: 10 }}\n          initialVelocityY={{ min: -10, max: 10 }}\n        />\n      )}\n      <button onClick={() => setShowConfetti(prev => !prev)} style={{ position: 'absolute', bottom: '20px', left: '50%', transform: 'translateX(-50%)', padding: '10px 20px', cursor: 'pointer', border: 'none', borderRadius: '5px', backgroundColor: '#3f51b5', color: 'white' }}>\n        Toggle Confetti\n      </button>\n    </div>\n  );\n}","lang":"typescript","description":"This quickstart demonstrates how to integrate `react-confetti` into a React application, dynamically adjusting to window size changes using a custom hook, and configuring various confetti properties. It also includes an example of programmatically stopping the confetti after a duration and a toggle button.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}