Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
react-confetti-boom
Advanced tools
A customizable React confetti explosion component for celebrations and special events
React Confetti Boom 🎉 is a lightweight and customizable confetti animation component for React applications. Enhance user experience by adding a fun and engaging confetti effect to your app with just a few lines of code.
boom mode | fall mode |
---|---|
To install React Confetti Boom, run the following command:
npm install react-confetti-boom
Import the Confetti component and add it to your JSX.
import React from 'react';
import Confetti from 'react-confetti-boom';
function MyApp() {
return (
<div>
<h1>My React App</h1>
<Confetti />
</div>
);
}
export default MyApp;
You can check out the live demo of react-confetti-boom
in action on the following page: https://almond-bongbong.github.io/react-confetti-boom/
The demo page provides an interactive way to customize the confetti settings, such as starting position, particle count, angle, shape size, and colors. This helps you visualize how the confetti effect will look in your own project.
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 |
import React from 'react';
import Confetti from 'react-confetti-boom';
function Celebration() {
return (
<div>
<h1>Congratulations!</h1>
<Confetti
x={0.5}
y={0.1}
particleCount={50}
deg={270}
shapeSize={8}
spreadDeg={45}
effectInterval={2000}
effectCount={3}
colors={['#ff577f', '#ff884b', '#ffd384', '#fff9b0', '#3498db']}
/>
</div>
);
}
export default Celebration;
This example will render a confetti animation with 50 particles starting at 10% from the top of the canvas. The particles will be emitted at a 270-degree angle, with a 45-degree spread. The confetti bursts will occur every 2 seconds, for a total of 3 bursts. The confetti particles will use the provided array of colors.
This project is licensed under the terms of the MIT License.
FAQs
A customizable React confetti explosion component for celebrations and special events
The npm package react-confetti-boom receives a total of 1,353 weekly downloads. As such, react-confetti-boom popularity was classified as popular.
We found that react-confetti-boom demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.