React DOM Confetti

A react component to trigger confetti explosions on state changes

Confetti settings

90
360
40
70
0.12
3000
3
10px
10px
500px
Color presets

Code

The confetti will trigger whenever the prop active goes from falsy to truthy.

import Confetti from 'react-dom-confetti';

const config = {
  angle: 90,
  spread: 360,
  startVelocity: 40,
  elementCount: 70,
  dragFriction: 0.12,
  duration: 3000,
  stagger: 3,
  width: "10px",
  height: "10px",
  perspective: "500px",
  colors: ["#a864fd", "#29cdff", "#78ff44", "#ff718d", "#fdff6a"]
};
return <Confetti active={ someProp } config={ config }/>