Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/loonywizard/js-confetti
JS Confetti library that supports emojis 🦄 🎉 ⚡️
https://github.com/loonywizard/js-confetti
animation canvas canvas-confetti confetti js-confetti
Last synced: 2 days ago
JSON representation
JS Confetti library that supports emojis 🦄 🎉 ⚡️
- Host: GitHub
- URL: https://github.com/loonywizard/js-confetti
- Owner: loonywizard
- License: mit
- Created: 2021-02-23T14:04:45.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-01-12T15:24:26.000Z (11 months ago)
- Last Synced: 2024-12-12T18:03:38.175Z (9 days ago)
- Topics: animation, canvas, canvas-confetti, confetti, js-confetti
- Language: TypeScript
- Homepage: https://loonywizard.github.io/js-confetti/
- Size: 17.8 MB
- Stars: 1,162
- Watchers: 5
- Forks: 48
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - loonywizard/js-confetti - JS Confetti library that supports emojis 🦄 🎉 ⚡️ (TypeScript)
README
[](https://badge.fury.io/js/js-confetti)
[](https://www.jsdelivr.com/package/npm/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/loonywizard/js-confetti) | [NPM](https://www.npmjs.com/package/js-confetti) | [Demo](https://loonywizard.github.io/js-confetti/)
## Install
You can install library from NPM using yarn or npm
```sh
yarn add 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 '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,
})
```
## 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