react-confetti

Basic Confetti Animation

This feature allows you to add a basic confetti animation to your React application with minimal setup. Simply import the Confetti component and include it in your JSX.

import React from 'react';
import Confetti from 'react-confetti';

const BasicConfetti = () => (
  <Confetti />
);

export default BasicConfetti;

Customizable Confetti

This feature allows you to customize various aspects of the confetti animation, such as the number of pieces, gravity, and colors. This makes it easy to tailor the animation to fit the theme of your application.

import React from 'react';
import Confetti from 'react-confetti';

const CustomConfetti = () => (
  <Confetti
    width={window.innerWidth}
    height={window.innerHeight}
    numberOfPieces={500}
    gravity={0.1}
    colors={['#ff0', '#f0f', '#0ff']}
  />
);

export default CustomConfetti;

Controlled Confetti

This feature allows you to control when the confetti animation is active. In this example, a button is used to toggle the confetti animation on and off, providing a more interactive experience for users.

import React, { useState } from 'react';
import Confetti from 'react-confetti';

const ControlledConfetti = () => {
  const [isConfettiActive, setIsConfettiActive] = useState(false);

  return (
    <div>
      <button onClick={() => setIsConfettiActive(!isConfettiActive)}>
        Toggle Confetti
      </button>
      {isConfettiActive && <Confetti />}
    </div>
  );
};

export default ControlledConfetti;