# vue-confetti-explosion

> Confetti explosion in Vue 3 🎉🎊

Latest version **1.0.2** (published 2022-11-29) · 0 weekly downloads

## Install

```sh
npm install vue-confetti-explosion
pnpm add vue-confetti-explosion
yarn add vue-confetti-explosion
bun add vue-confetti-explosion
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2022-11-29 |
| First published | 2021-11-24 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 0 |
| Unpacked size | 54.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 91 |
| Author | Valgeir Björnsson |
| Maintainers | valgeirb |
| Keywords | confetti, party, fun, badass, badassery, vue, vue3, small, tiny, performant |

## Links

- npm: https://www.npmjs.com/package/vue-confetti-explosion
- Repository: https://github.com/valgeirb/vue-confetti-explosion
- Homepage: https://github.com/valgeirb/vue-confetti-explosion#readme
- Issues: https://github.com/valgeirb/vue-confetti-explosion/issues
- npm.io page: https://npm.io/package/vue-confetti-explosion

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2022-11-29
- 1.0.1 — 2021-11-24
- 1.0.0 — 2021-11-24
- 0.1.0 — 2021-11-24

## README

# vue-confetti-explosion

> This library is the Vue 3 port of [svelte-confetti-explosion](https://www.npmjs.com/package/svelte-confetti-explosion) which in turn is ported from the [@reonomy/react-confetti-explosion](https://www.npmjs.com/package/@reonomy/react-confetti-explosion) package.

![confetti-large-edit](https://user-images.githubusercontent.com/5460067/111782964-0c6bed80-8890-11eb-8a8b-0a4fdbc30cbd.gif)

## Installing

```bash
# pnpm
pnpm add vue-confetti-explosion

# npm
npm install vue-confetti-explosion

# yarn
yarn add vue-confetti-explosion
```

## Usage

Basic usage:

```html
<script setup>
  import ConfettiExplosion from "vue-confetti-explosion";
</script>

<template>
  <ConfettiExplosion />
</template>
```

Customizing behavior with options:

```html
<ConfettiExplosion :particleCount="200" :force="0.3" />
```

## Props

There's tons of options available for this package. All of them are already documented within the code itself, so you'll never have to leave the code editor.

### particleCount

Number of confetti particles to create.

**type:** `number`

**Default value:** 150

**Example:**

```html
<ConfettiExplosion :particleCount="200" />
```

### particleSize

Size of the confetti particles in pixels

**type:** `number`

**Default value:** 12

**Example:**

```html
<ConfettiExplosion :particleSize="20" />
```

### duration

Duration of the animation in milliseconds

**type:** `number`

**Default value:** 3500

**Example:**

```html
<ConfettiExplosion :duration="5000" />
```

### colors

Colors to use for the confetti particles. Pass string array of colors. Can use hex colors, named colors, CSS Variables, literally anything valid in plain CSS.

**type:** `Array<string>`

**Default value:** `['#FFC700', '#FF0000', '#2E3191', '#41BBC7']`

**Example:**

```html
<ConfettiExplosion :colors=['var(--yellow)', 'var(--red)', '#2E3191', '#41BBC7']
/>
```

### force

Force of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum force. Will error out if you pass a value outside of this range.

**type:** `number`

**Default value:** 0.5

**Example:**

```html
<ConfettiExplosion :force="0.3" />
```

### stageHeight

Height of the stage in pixels. Confetti will only fall within this height.

**type:** `number`

**Default value:** 800

**Example:**

```html
<ConfettiExplosion :stageHeight="500" />
```

### stageWidth

Width of the stage in pixels. Confetti will only fall within this width.

**type:** `number`

**Default value:** 1600

**Example:**

```html
<ConfettiExplosion :stageWidth="500" />
```

### shouldDestroyAfterDone

Whether or not destroy all confetti nodes after the `duration` period has passed. By default it destroys all nodes, to free up memory.

**type:** `boolean`

**Default value:** `true`

**Example:**

```html
<ConfettiExplosion :shouldDestroyAfterDone="false" />
```

~~## Style Props~~

> This is Svelte specific, still not implemented for this Vue 3 component

~~You can specify two style props on the component: `--x` and `--y`. These will shift the confetti particles on the x and y axis. by how much you specify, These can be in `px`, `em`, `rem`, `vh`, `vw`, literally any valid CSS unit.~~

~~**USAGE:**~~

```html
<ConfettiExplosion --x="10px" --y="10px" />
```

## Examples

```html
<script setup>
  import { nextTick, ref } from "vue";
  import ConfettiExplosion from "vue-confetti-explosion";

  const visible = ref(false);

  const explode = async () => {
    visible.value = false;
    await nextTick();
    visible.value = true;
  };
</script>

<template>
  <div>
    <button @click="explode">Show confetti</button>
    <ConfettiExplosion v-if="visible" />
  </div>
</template>
```

## Potential gotchas

- Your container must be `overflow: visible` in order to allow elements to fully spread across area.
- If your `floorHeight` is too small, particles may visibly land on the floor instead of disappearing off-screen.

## Performance

This library functions by creating 2 DOM nodes for every single confetti. By default, if the `particlesCount` is set to 150, it will create 300 nodes. This is a lot of nodes. For most devices, these many nodes are not a big issue, but I recommend checking your target devices' performance if you choose to go with a higher number, like 400 or 500.

Also, after the specified `duration`, all the confetti DOM nodes will be destroyed. This is to free up memory. If you wish to keep them around, set `shouldDestroyAfterDone` to `false`.

## License

MIT License
© [Valgeir Björnsson](https://valgeir.dev/)

---
_Source: https://npm.io/package/vue-confetti-explosion · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._