almond-bongbong / react-confetti-boom

🎉 Add a fun and engaging confetti effect to your app with just a few lines of code.

React Confetti Boom 🎉 - Celebrate With Style!

🚀 Bring Joy and Celebration to Your React App! Dive into a world of vibrant animations with React Confetti Boom, the ultimate confetti component for React developers.

🌈 Why React Confetti Boom?

React Confetti Boom offers a lightweight, flexible, and easy-to-use solution to add a touch of celebration to your application. Whether it's celebrating a user achievement, a special event, or adding fun interactions, our confetti animation component will bring your React application to life.

🎨 Key Features

• Two Animation Modes: Choose between 'boom' for an explosive celebration or 'fall' for a gentle rain of joy.
• Highly Customizable: Control every aspect of the confetti, from count to colors, to perfectly match your app's theme.
• Performance Optimized: Designed for efficiency, it adds a magical touch without compromising your app's performance.

💻 Quick Start

npm install react-confetti-boom

🛠 How to Use

Just a few lines to create an unforgettable moment:

import Confetti from 'react-confetti-boom';

function MyApp() {
  return <Confetti />;
}

🌍 Live Demo

Experience the magic firsthand and customize the confetti to your liking: Live Demo

🔧 Props Guide

Fine-tune the celebration with our comprehensive props:

• mode: 'boom' or 'fall' - the style of your celebration.
• colors: Array of hex values to paint your confetti.
• particleCount: How much confetti to burst into the scene.

And much more!

Name	Type	Default	Description
mode	'boom' | 'fall'	'boom'	Mode for confetti animation. 'boom' for explosion-like, 'fall' for rain-like effect
x	number	0.5	Horizontal starting position of confetti as a ratio of canvas width (0 to 1)
y	number	0.5	Vertical starting position of confetti as a ratio of canvas height (0 to 1)
particleCount	number	30	Number of confetti particles to generate
deg	number	270	Initial angle (in degrees) at which particles are emitted
shapeSize	number	12	Size of confetti particles
spreadDeg	number	30	Angle (in degrees) that particles can deviate from the initial angle (deg)
effectInterval	number	3000	Interval (in ms) between consecutive confetti bursts
effectCount	number	1	Number of confetti bursts to render
colors	string[]	['#ff577f', '#ff884b', '#ffd384', '#fff9b0']	Array of colors for confetti particles, in hex format
launchSpeed	number	1	Initial speed at which particles are launched

🎉 Example Usage

<Confetti mode="boom" particleCount={50} colors={['#ff577f', '#ff884b']} />

Celebrate achievements with a burst of color!

⭐ Support React Confetti Boom

Loving React Confetti Boom? Here's how you can help us make the project even better!

• Give it a star: If you find React Confetti Boom useful, consider giving it a star on GitHub. Your star is more than just a kudos—it's a huge boost of motivation for us, and it helps more developers discover our project.
• Spread the word: Share React Confetti Boom with your friends and colleagues. The more, the merrier!
• Join the community: Feedback, ideas, or looking to contribute? Join us on GitHub and let's make React Confetti Boom even more awesome together.

Let's celebrate coding, one confetti burst at a time! 🎉

📜 License

Proudly open-sourced under the MIT License.