Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including dom-confetti with all npm packages installed. Try it out:

var domConfetti = require("dom-confetti")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

dom-confetti v0.1.1

confetti with dom elements

dom-confetti

npm version

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
  • height: - height of the confetti elements
  • elementCount - 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.1
  • duration - Duration in milliseconds, defaults to 3000
  • stagger - Delay for each fetti in milliseconds, defaults to 0.
  • random - Randomization function, defaults to Math.random
  • colors - 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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free