xlibs-components/dist/components/magicui/confetti.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import confetti from "canvas-confetti";
import { createContext, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, } from "react";
import { Button } from '../../components/ui/button.js';
const ConfettiContext = createContext({});
// Define component first
const ConfettiComponent = forwardRef((props, ref) => {
    const { options, globalOptions = { resize: true, useWorker: true }, manualstart = false, children, ...rest } = props;
    const instanceRef = useRef(null);
    const canvasRef = useCallback((node) => {
        if (node !== null) {
            if (instanceRef.current)
                return;
            instanceRef.current = confetti.create(node, {
                ...globalOptions,
                resize: true,
            });
        }
        else {
            if (instanceRef.current) {
                instanceRef.current.reset();
                instanceRef.current = null;
            }
        }
    }, [globalOptions]);
    const fire = useCallback(async (opts = {}) => {
        try {
            await instanceRef.current?.({ ...options, ...opts });
        }
        catch (error) {
            console.error("Confetti error:", error);
        }
    }, [options]);
    const api = useMemo(() => ({
        fire,
    }), [fire]);
    useImperativeHandle(ref, () => api, [api]);
    useEffect(() => {
        if (!manualstart) {
            (async () => {
                try {
                    await fire();
                }
                catch (error) {
                    console.error("Confetti effect error:", error);
                }
            })();
        }
    }, [manualstart, fire]);
    return (_jsxs(ConfettiContext.Provider, { value: api, children: [_jsx("canvas", { ref: canvasRef, ...rest }), children] }));
});
// Set display name immediately
ConfettiComponent.displayName = "Confetti";
// Export as Confetti
export const Confetti = ConfettiComponent;
const ConfettiButtonComponent = ({ options, children, ...props }) => {
    const handleClick = async (event) => {
        try {
            const rect = event.currentTarget.getBoundingClientRect();
            const x = rect.left + rect.width / 2;
            const y = rect.top + rect.height / 2;
            await confetti({
                ...options,
                origin: {
                    x: x / window.innerWidth,
                    y: y / window.innerHeight,
                },
            });
        }
        catch (error) {
            console.error("Confetti button error:", error);
        }
    };
    return (_jsx(Button, { onClick: handleClick, ...props, children: children }));
};
ConfettiButtonComponent.displayName = "ConfettiButton";
export const ConfettiButton = ConfettiButtonComponent;