Skip to content

A lightweight css-animation based confetti exploder for React

License

Notifications You must be signed in to change notification settings

DercilioFontes/confetti-explosion-react

 
 

Repository files navigation

React Confetti Explosion

npm version

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

Usage

import ConfettiExplosion from 'confetti-explosion-react';

function App() {
  const [isExploding, setIsExploding] = React.useState(false);
  return <>{isExploding && <ConfettiExplosion />}</>;
}

Optional Props

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?).

Potential gotchas

  • Your container must be full 100% width/height for all particles to be seen, but overflow: hidden to avoid having particles create scrollbars.
  • If your 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.

Example Screenshots

Big explosion

{
  force: 0.6,
  duration: 5000,
  particleCount: 200,
  height: 1600,
  width: 1600
}

confetti-large-edit

Little explosion

{
  force: 0.4,
  duration: 3000,
  particleCount: 60,
  height: 1000,
  width: 1000
}

confetti-small-edit

Tiny explosion

{
  force: 0.4,
  duration: 2000,
  particleCount: 30,
  height: 500,
  width: 300
}

confetti-tiny

Author

DercilioFontes based on herrethan work

License

MIT

About

A lightweight css-animation based confetti exploder for React

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 79.0%
  • JavaScript 19.4%
  • HTML 1.6%