@neuralabs/confetti-party
v0.0.7
Published
JS Confetti library with zero dependencies, works without any config, TS types included, adapts to user screen
Downloads
10
Readme
NOTE: This is a port of the js-confetti library (which no longer seems to be maintained).
🎉 JavaScript Confetti library
💥 Supports emojis as confetti ⚡️ Zero dependencies used 🦄 Works without any config, yet configurable 🛠 Has TypeScript types 🧩 Confetti speed adapts to user screen width
Install
You can install this library from NPM using yarn or npm
npm install @neuralabs/confetti-party
Alternatively you can download script from CDN and then access ConfettiParty
global variable
<script src="https://cdn.jsdelivr.net/npm/@neuralabs/confetti-party@latest/dist/confetti-party.min.js"></script>
Usage
Initialize instance of ConfettiParty class and call addConfetti method
import ConfettiParty from '@neuralabs/confetti-party'
const confettiParty = new ConfettiParty()
confettiParty.addConfetti()
NOTE new ConfettiParty()
creates HTML Canvas element with id="confetti-party" and adds it to page, if there is already element with such id, it will be used instead.
If need to use custom canvas element, you can pass canvas
el to ConfettiParty constructor or directly canvasId (example)
const canvas = document.getElementById('canvas_id')
const ConfettiParty = new ConfettiParty({ canvas })
// or
const ConfettiParty = new ConfettiParty({ canvasId: 'canvas_id' })
Customise confetti
Customize confetti config:
ConfettiParty.addConfetti({
confettiRadius: 8, // Confetti size in pixels, default: 6
confettiNumber: 500, // Number of confetti per "explosion", default: 250
confettiColors: [
// Array of hex colors, can be ommited
'#ff0a54',
'#ff477e',
'#ff7096',
'#ff85a1',
'#fbb1bd',
'#f9bec7'
]
})
Use emojis as confetti:
ConfettiParty.addConfetti({
emojis: ['🦄', '⚡️', '💥', '✨', '💫', '🌸'],
emojiSize: 100, // Size of emojis in pixels, default: 80
confettiNumber: 30 // Number of emojis per "explosion", default: 40
})
clearCanvas()
Call clearCanvas
method to clear canvas
Example:
const ConfettiParty = new ConfettiParty()
ConfettiParty.addConfetti()
// ...
ConfettiParty.clearCanvas()
addConfetti Promise
addConfetti
method returns Promise, which is resolved when added confetti dissapears from the user screen due to the gravity physics of confetti
Example:
// async/await
await ConfettiParty.addConfetti()
console.log('Confetti animation completed!')
// Promise.then
ConfettiParty.addConfetti().then(() =>
console.log('Confetti animation completed!')
)
How to run locally
Install dependencies by Yarn or NPM
npm install && npm --prefix ./site install
Run dev
script to start development server
npm run dev