A lightweight and customizable confetti animation component for React applications.
To install the React Celebration Confetti library, run the following command in your project directory:
npm install react-celebration-confetti
or if you're using Yarn:
yarn add react-celebration-confetti
Here's a basic example of how to use the Confetti component in your React application:
import React, { useState } from 'react';
import { Confetti } from 'react-celebration-confetti';
function App() {
const [showConfetti, setShowConfetti] = useState(false);
const handleCelebrate = () => {
setShowConfetti(true);
setTimeout(() => setShowConfetti(false), 30000); // 1 minute
};
return (
<div>
<button onClick={handleCelebrate}>Celebrate!</button>
{showConfetti && <Confetti />}
</div>
);
}
export default App;
This example will display a button that, when clicked, will trigger a confetti animation that lasts for 1 minute.
The Confetti component accepts the following props:
Prop | Type | Default | Description |
---|---|---|---|
icons | string[] | ['🎉', '🎊', '✨', '🥳', '🍾'] | Array of icons to use as confetti |
duration | number | 30000 | Duration of the animation in milliseconds |
count | number | 50 | Number of confetti pieces to display |
You can customize the confetti animation by passing different props to the Confetti component:
<Confetti
icons={['🌟', '💖', '🏆', '🎈']}
duration={30000}
count={200}
/>
This will create a confetti animation with custom icons, lasting for 30 seconds, and displaying 200 confetti pieces.
To set up the project for development:
-
Clone the repository:
git clone https://github.com/Vaibhavihole31/react-celebration-confetti.git cd react-celebration-confetti
-
Install dependencies:
npm install
-
Start the development server:
npm start
-
To build the library:
npm run build
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature
) - Commit your changes (
git commit -m 'Add some AmazingFeature'
) - Push to the branch (
git push origin feature/AmazingFeature
) - Open a Pull Request