react-confetti-explosion

react-confetti-explosion is a lightweight and customizable React component that allows developers to easily add a visually appealing confetti explosion effect to their web applications. It's particularly useful for celebrating user achievements, marking successful actions, or simply adding a festive touch to an interactive experience. The library is built with performance in mind, using CSS animations for the particles to ensure smooth rendering.

Key features and usage:
1. Installation: It can be installed via npm or yarn: `npm install react-confetti-explosion` or `yarn add react-confetti-explosion`.
2. Basic Usage: The component is rendered conditionally based on a boolean prop, `active`. When `active` becomes `true`, the confetti explosion initiates. Developers typically manage this `active` prop using React state.
3. Customization: It offers several props to customize the explosion's appearance and behavior:
* `active` (boolean, required): Triggers the explosion when `true`.
* `force` (number): Controls the force/spread of the explosion (default: 0.6).
* `duration` (number): The total duration of the explosion in milliseconds (default: 3000).
* `particleCount` (number): The number of confetti particles (default: 100).
* `particleSize` (number): The size of each particle in pixels (default: 10).
* `colors` (array of strings): An array of hex color codes for the confetti particles (default: a predefined set).
* `width` (number): The width of the explosion source in pixels (default: 100).
* `height` (number): The height of the explosion source in pixels (default: 100).
* `zIndex` (number): CSS z-index for the confetti container (default: 200).
* `onComplete` (function): A callback function that fires when the explosion animation completes.

When to use it:
* After a successful form submission or action.
* Upon reaching a milestone or completing a task in a game/application.
* To celebrate a correct answer in a quiz.
* For user onboarding completion.
* Anywhere a celebratory visual cue can enhance user experience.

import React, { useState, useEffect } from 'react';
import ConfettiExplosion from 'react-confetti-explosion';

function CelebrationComponent() {
  const [isExploding, setIsExploding] = useState(false);

  const explodeProps = {
    force: 0.6,
    duration: 2500,
    particleCount: 80,
    width: 1000,
    colors: ['#041E42', '#EFB724', '#000000', '#FFFFFF']
  };

  const handleButtonClick = () => {
    setIsExploding(true);
    // Reset exploding state after the duration of the confetti to allow re-triggering
    setTimeout(() => {
      setIsExploding(false);
    }, explodeProps.duration);
  };

  return (
    <div style={{ 
      display: 'flex', 
      flexDirection: 'column', 
      alignItems: 'center', 
      justifyContent: 'center', 
      minHeight: '80vh', 
      fontFamily: 'Arial, sans-serif' 
    }}>
      <h1>Click to Celebrate!</h1>
      <button 
        onClick={handleButtonClick}
        style={{
          padding: '12px 24px',
          fontSize: '18px',
          cursor: 'pointer',
          backgroundColor: '#28a745',
          color: 'white',
          border: 'none',
          borderRadius: '5px',
          marginTop: '20px',
          boxShadow: '0 4px 8px rgba(0,0,0,0.2)'
        }}
      >
        Trigger Confetti!
      </button>

      {isExploding && 
        <ConfettiExplosion 
          {...explodeProps} 
          onComplete={() => console.log('Confetti explosion finished!')}
        />
      }

      <p style={{ marginTop: '50px', maxWidth: '600px', textAlign: 'center' }}>
        This example demonstrates how to use `react-confetti-explosion`.
        Click the button to see a burst of confetti. The `isExploding` state
        controls when the confetti appears, and a `setTimeout` resets it
        after the animation completes, allowing the effect to be triggered again.
      </p>
    </div>
  );
}

export default CelebrationComponent;