Confetti

Canvas confetti bursts for celebrating wins, form submits, and other special moments. Includes `Confetti` and `ConfettiButton`.

Default

Hover the canvas to fire. Uses Confetti with an imperative fire() via ref.

Loading…

Installation

CLI

npx @sonojs/ui@latest add confetti

Also needs

npx @sonojs/ui@latest add button

npm i @types/canvas-confetti canvas-confetti

Usage

confetti.tsx

import { useRef } from "react"

import { Confetti, type ConfettiRef } from "@/components/confetti"

export function Example() {
  const confettiRef = useRef<ConfettiRef>(null)

  return (
    <div>
      <Confetti ref={confettiRef} manualstart />
      <button type="button" onClick={() => confettiRef.current?.fire()}>
        Trigger Confetti
      </button>
    </div>
  )
}

Props

Confetti

Prop	Type	Default	Description
options	ConfettiOptions	{}	Default options merged into automatic and imperative `fire()` calls.
globalOptions	ConfettiGlobalOptions	{ resize: true, useWorker: true }	Passed to `canvas-confetti.create()`.
manualstart	boolean	false	Skip auto-fire on mount; use `ref.fire()` instead.
className	string	-	Classes on the canvas element.

ConfettiRef

Prop	Type	Default	Description
fire	(options?: ConfettiOptions) => Promise<null · undefined>	-	Imperatively trigger a burst on the canvas instance.

ConfettiButton

Prop	Type	Default	Description
options	ConfettiOptions & ConfettiGlobalOptions	{}	Options for the global confetti burst on click (origin from the button).
children	React.ReactNode	-	Button label and children.

Credits

Credit to Bankk
Inspired by canvas-confetti