
Security News
Browserslist-rs Gets Major Refactor, Cutting Binary Size by Over 1MB
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
confetti-explosion-react
Advanced tools
A React lightweight css-animation based confetti exploder
This package is a fork from herrethan package react-confetti-explosion to support React 18 and to update dependencies.
From the original project:
This is inspired by this beautiful and oft-used confetti which uses canvas, but equally inspired by how many bad looking CSS examples there are out there. The goal was to create a super lightweight confetti component that would not require canvas, use only CSS for animation, and could also be controlled as an explosion (rather than raining confetti), without the need to write a full-blown particle generator.
Install:
$ npm install confetti-explosion-react
$ yarn add confetti-explosion-react
import ConfettiExplosion from 'confetti-explosion-react';
function App() {
const [isExploding, setIsExploding] = React.useState(false);
return <>{isExploding && <ConfettiExplosion />}</>;
}
Name | Type | Default | Description |
---|---|---|---|
particleCount | number | 150 | Total number of particles used. Generally try to stay under 400 for optimal performance. |
particleSize | number | 12 | Size of particles in pixels. This means width for squares, diameter for circles. Note there is also a bit of randomness added to these. |
duration | number | 3500 | Duration of explosion in ms. This is the time it takes particles to travel from explosion point to the floor, as defined by height . |
colors | string[] | [ '#FFC700', '#FF0000', '#2E3191', '#41BBC7' ] | An array of any css-readable colors, which are evenly distributed across the number of total particles. |
force | number | 0.5 | Between 0-1, roughly the vertical force at which particles initially explode. Straying too far away from 0.5 may start looking...interesting. |
height | number | 800 | Pixel distance the particles will vertically spread from initial explosion point. |
width | number | 1600 | Pixel distance the particles will horizontally spread from initial explosion point. |
Although the duration of the explosion is controlled, it is up to the consumer how and when the ConfettiExplosion
is rendered and positioned (and, hey, maybe even faded out?).
overflow: hidden
to avoid having particles create scrollbars.height
is too small, particles may visibly land on the floor instead of disappearing off-screen.To keep the library as little as possible much of the physics have been estimated, cheapened, and downright mutilated. There are certainly prop combinations that will not look realistic, due to the limitations of CSS animations. But there should be enough options to fit most needs.
{
force: 0.6,
duration: 5000,
particleCount: 200,
height: 1600,
width: 1600
}
{
force: 0.4,
duration: 3000,
particleCount: 60,
height: 1000,
width: 1000
}
{
force: 0.4,
duration: 2000,
particleCount: 30,
height: 500,
width: 300
}
DercilioFontes based on herrethan work
MIT
FAQs
A React lightweight css-animation based confetti exploder
The npm package confetti-explosion-react receives a total of 210 weekly downloads. As such, confetti-explosion-react popularity was classified as not popular.
We found that confetti-explosion-react 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
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.