useConfetti

Performant confetti animation in the browser

canvas-confetti

Git

Demo

Usage

Use the auto-imported useConfetti composable to programmatically control canvas-confetti.

<script setup lang="ts">
const confetti = useConfetti()
</script>

• The useConfetti composable is created using createSharedComposable, ensuring that the same canvas-confetti is shared across your entire application.

DANGER

Since canvas-confetti works with the DOM, make sure your code only runs on the client.

API

fire(options?: confetti.Options) => Promise<undefined> | null

Fire some confetti.

<script setup lang="ts">
const confetti = useConfetti()

function fireConfetti(): void {
  confetti.fire()
}
</script>

create(canvas?: HTMLCanvasElement, options?: GlobalOptions) => CreateTypes

This method creates an instance of the confetti function that uses a custom canvas.

Use if you need to specify your own parameters for confetti.

<script setup lang="ts">
const confetti = useConfetti()

function fireConfettiWithOptions(): void {
  confetti.create()
  confetti.fire({
    particleCount: 100,
    spread: 70,
    origin: { y: 0.6 }
  })
}
</script>

Or like this. Specify your own Canvas.

<script setup lang="ts">
import { ref } from 'vue'
  
const myCanvas = ref<HTMLCanvasElement | undefined>()
const confetti = useConfetti()

function fireAtPlace(): void {
  const confettiInstance = confetti.create(myCanvas.value, { resize: true })
  confettiInstance({
    spread: 70
  })
}
</script>
<template>
  <B24Button label="custom canvas" color="link" depth="dark" @click.stop="fireAtPlace" />
  <div>
    <canvas ref="myCanvas" class="h-64 w-1/2" />
  </div>
</template>

Example

Here's a complete example of how to use the useConfetti composable:

Simple use

Details

<script setup lang="ts">
const confetti = useConfetti()

function fireConfetti(): void {
  confetti.fire()
}
</script>

<template>
  <B24Button label="simple" color="primary" @click.stop="fireConfetti" />
</template>

With some options

Details

<script setup lang="ts">
const confetti = useConfetti()

function fireConfettiWithOptions(): void {
  confetti.create()
  confetti.fire({
    particleCount: 100,
    spread: 70,
    origin: { y: 0.6 }
  })
}
</script>

<template>
  <B24Button label="with options" color="secondary" @click.stop="fireConfettiWithOptions" />
</template>

At custom place

Details

<script setup lang="ts">
import { ref } from 'vue'

const myCanvas = ref<HTMLCanvasElement | undefined>()
const confetti = useConfetti()

function fireAtPlace(): void {
  const confettiInstance = confetti.create(myCanvas.value, { resize: true })
  confettiInstance({
    spread: 70
  })
}
</script>

<template>
  <B24Button label="custom canvas" color="collab" @click.stop="fireAtPlace" />

  <div class="relative mt-sm2 mb-4 w-full">
    <canvas
      ref="myCanvas"
      class="m-auto h-64 w-1/2 rounded border border-base-300 bg-base-100 dark:border-base-600 dark:bg-base-900"
    />
  </div>
</template>