[](https://badge.fury.io/js/%40purkkakoodari%2Fjs-confetti)
[](https://www.jsdelivr.com/package/npm/@purkkakoodari/js-confetti)
# 🎉 JavaScript Confetti library
💥 Supports emojis as confetti
⚡️ Zero dependencies used
🦄 Works without any config, yet configurable
🛠 Has TypeScript typings
🧩 Confetti speed adapts to user screen width
Links: [GitHub](https://github.com/PurkkaKoodari/js-confetti) | [NPM](https://www.npmjs.com/package/@purkkakoodari/js-confetti)
## Install
You can install library from NPM using yarn or npm
```sh
yarn add @purkkakoodari/js-confetti
```
Alternatively you can download script from CDN
```html
```
and then access `JSConfetti` global variable
## Usage
Initialize instance of JSConfetti class and call addConfetti method
```js
import JSConfetti from '@purkkakoodari/js-confetti'
const jsConfetti = new JSConfetti()
jsConfetti.addConfetti()
```
*NOTE* `new JSConfetti()` creates HTML Canvas element and adds it to page, so call it only once!
If need to use custom canvas element, you can pass `canvas` arg to JSConfetti constructor ([example](https://codepen.io/loonywizard-the-selector/pen/wvdPbGm))
```js
const canvas = document.getElementById('your_custom_canvas_id')
const jsConfetti = new JSConfetti({ canvas })
```
## Customise confetti
Use emojis as confetti:
```js
jsConfetti.addConfetti({
emojis: ['🌈', '⚡️', '💥', '✨', '💫', '🌸'],
})
```
Customize confetti colors:
```js
jsConfetti.addConfetti({
confettiColors: [
'#ff0a54', '#ff477e', '#ff7096', '#ff85a1', '#fbb1bd', '#f9bec7',
],
})
```
Customize confetti radius:
```js
jsConfetti.addConfetti({
confettiRadius: 6,
})
```
Customize confetti number:
```js
jsConfetti.addConfetti({
confettiRadius: 6,
confettiNumber: 500,
})
```
Combine different properties:
```js
jsConfetti.addConfetti({
emojis: ['🦄'],
emojiSize: 100,
confettiNumber: 30,
})
```
## addConfettiAtPosition
example with dispatching confetti on mouse click -
take X and Y position of the mouse from event and
pass them in `confettiDispatchPosition` param.
all customisations work in this method as well!
```js
jsConfettiRef.addConfettiAtPosition({
confettiDispatchPosition: {
x: event.clientX,
y: event.clientY
}
})
```
## clearCanvas()
Call `clearCanvas` method to clear canvas
Example:
```js
const jsConfetti = new JSConfetti()
jsConfetti.addConfetti()
// ...
jsConfetti.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:
```js
// async/await
await jsConfetti.addConfetti()
console.log('Confetti animation completed!')
// Promise.then
jsConfetti.addConfetti()
.then(() => console.log('Confetti animation completed!'))
```
## How to run locally
Install dependencies by Yarn or NPM
```sh
yarn install
```
Run `dev` script with website build
```sh
yarn run dev
```
## License
MIT