Confetti

1"use client"
2 
3import type { ReactNode } from "react"
4import React, {
5  createContext,
6  forwardRef,
7  useCallback,
8  useEffect,
9  useImperativeHandle,
10  useMemo,
11  useRef,
12} from "react"
13import type {
14  GlobalOptions as ConfettiGlobalOptions,
15  CreateTypes as ConfettiInstance,
16  Options as ConfettiOptions,
17} from "canvas-confetti"
18import confetti from "canvas-confetti"
19 
20import { Button } from "@/components/ui/button"
21 
22export type ConfettiRef = {
23  fire: (options?: ConfettiOptions) => Promise<void> | void
24}
25 
26type Props = React.ComponentPropsWithRef<"canvas"> & {
27  options?: ConfettiOptions
28  globalOptions?: ConfettiGlobalOptions
29  manualstart?: boolean
30  children?: ReactNode
31}
32 
33const ConfettiContext = createContext<ConfettiRef | null>(null)
34 
35const ConfettiComponent = forwardRef<ConfettiRef, Props>((props, ref) => {
36  const {
37    options,
38    globalOptions = { resize: true, useWorker: true },
39    manualstart = false,
40    children,
41    className,
42    ...rest
43  } = props
44 
45  const canvasNodeRef = useRef<HTMLCanvasElement | null>(null)
46  const instanceRef = useRef<ConfettiInstance | null>(null)
47  const optionsRef = useRef(options)
48  const globalOptionsRef = useRef(globalOptions)
49 
50  useEffect(() => {
51    optionsRef.current = options
52  }, [options])
53 
54  useEffect(() => {
55    globalOptionsRef.current = globalOptions
56  }, [globalOptions])
57 
58  useEffect(() => {
59    if (canvasNodeRef.current && !instanceRef.current) {
60      instanceRef.current = confetti.create(canvasNodeRef.current, {
61        resize: true,
62        useWorker: true,
63        ...globalOptionsRef.current,
64      })
65    }
66 
67    return () => {
68      instanceRef.current?.reset()
69      instanceRef.current = null
70    }
71  }, [])
72 
73  const fire = useCallback(async (opts: ConfettiOptions = {}) => {
74    try {
75      await instanceRef.current?.({
76        ...optionsRef.current,
77        ...opts,
78      })
79    } catch (error) {
80      console.error("Confetti error:", error)
81    }
82  }, [])
83 
84  const api = useMemo<ConfettiRef>(() => ({ fire }), [fire])
85 
86  useImperativeHandle(ref, () => api, [api])
87 
88  useEffect(() => {
89    if (!manualstart) {
90      void fire()
91    }
92  }, [manualstart, fire])
93 
94  return (
95    <ConfettiContext.Provider value={api}>
96      <canvas ref={canvasNodeRef} className={className} {...rest} />
97      {children}
98    </ConfettiContext.Provider>
99  )
100})
101 
102ConfettiComponent.displayName = "Confetti"
103 
104export const Confetti = ConfettiComponent
105 
106// … truncated