npm package: @neuralabs/confetti-party
Description: JS Confetti library with zero dependencies, works without any config, TS types included, adapts to user screen
Author: NeuraLabs
Latest version: 0.0.7

<!-- <img src="assets/app-demo.gif" width="600px" /> -->
<!-- TODO vue package https://github.com/valgeirb/vue-confetti-explosion/tree/main -->

_NOTE_: This is a port of the [js-confetti](https://www.npmjs.com/package/js-confetti) library (which no longer seems to be maintained).

[![npm version](https://badge.fury.io/js/@neuralabs%2Fconfetti-party.svg)](https://badge.fury.io/js/@neuralabs%2Fconfetti-party)
![NPM Downloads](https://img.shields.io/npm/dw/@neuralabs%2Fconfetti-party)
[![](https://data.jsdelivr.com/v1/package/npm/@neuralabs/confetti-party/badge?style=rounded)](https://www.jsdelivr.com/package/npm/@neuralabs/confetti-party)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/@neuralabs%2Fconfetti-party)

# 🎉 JavaScript Confetti library

💥 Supports emojis as confetti<br/>
⚡️ Zero dependencies used<br/>
🦄 Works without any config, yet configurable<br/>
🛠 Has TypeScript types<br/>
🧩 Confetti speed adapts to user screen width

## Install

You can install this library from NPM using yarn or npm

```sh
npm install @neuralabs/confetti-party
```

Alternatively you can download script from CDN and then access `ConfettiParty` global variable

```html
<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

```js
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](https://codepen.io/shoguns/pen/NWoGJWe))

```js
const canvas = document.getElementById('canvas_id')

const ConfettiParty = new ConfettiParty({ canvas })

// or

const ConfettiParty = new ConfettiParty({ canvasId: 'canvas_id' })
```

## Customise confetti

Customize confetti config:

```js
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:

```js
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:

```js
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:

```js
// 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

```sh
npm install && npm --prefix ./site install
```

Run `dev` script to start development server

```sh
npm run dev
```