dom-confetti
v0.2.2
Published
confetti with dom elements
Downloads
265,141
Readme
dom-confetti
Trigger confetti explosions in the DOM.
import { confetti } from 'dom-confetti';
const button = document.querySelector(".my-button")
button.addEventListener("click", () => confetti(button))
This will trigger a confetti explosion every time a button is clicked.
Demo
https://daniel-lundin.github.io/react-dom-confetti/
Interface
confetti
(root, config = {})
root
should be the DOM element to start the explosion at, and
config
, if given, may be an object specifying the following options:
angle
- direction of the explosion in degrees, defaults to 90.spread
- spread of the explosion in degrees, defaults to 45.startVelocity
- Initial velocity of the particles, defaults to 45.width
: - width of the confetti elements as css string, defaults to10px
.height
: - height of the confetti elements as css string, defaults to10px
.perspective
- perspective of root element.height
: - height of the confetti elementselementCount
- Number of particle elements, defaults to 50.decay
- deprecated - Decrease in velocity per frame, defaults to 0.9 (Use of this will disable dragFriction)dragFriction
- Decrease in velocity proportional to current velocity, default to 0.1duration
- Duration in milliseconds, defaults to 3000stagger
- Delay for each fetti in milliseconds, defaults to 0.random
- Randomization function, defaults to Math.randomcolors
- An array of color codes, defaults to['#a864fd', '#29cdff', '#78ff44', '#ff718d' '#fdff6a']
Returns a promise that resolves once the confetti has completed its fade out.
License MIT, copyright Daniel Lundin 2019