useConfetti

Performant confetti animation in the browser

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.

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

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

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

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

With some options

<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="air-secondary" @click.stop="fireConfettiWithOptions" />
</template>

At custom place

<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>
  <div class="isolate relative p-4 min-h-40 w-full h-full flex flex-col flex-nowrap justify-center items-center gap-4">
    <B24Button label="custom canvas" color="air-primary-success" @click.stop="fireAtPlace" />

    <div class="relative mt-sm2 mb-4 w-full">
      <canvas
        ref="myCanvas"
        class="m-auto h-64 w-1/2 rounded backdrop-blur-md bg-(--ui-color-design-outline-na-bg) border-1 border-(--ui-color-design-outline-na-stroke)"
      />
    </div>
  </div>
</template>

extractShortcuts

A keyboard shortcut extractor for menu items.

useOverlay

A composable to programmatically control overlays in App.

useConfetti

Usage

API

Example

Simple use

With some options

At custom place