react-sparklefall/dist/index.esm.js

React component wrapper for SparkleFall - Beautiful falling sparkle animations

import React, { useRef, useEffect, useState } from 'react';
import SparkleFallLib from 'sparklefall';

/**
 * React component for SparkleFall animations
 */
const SparkleFall = ({ children, className = '', style = {}, paused = false, onStart, onStop, ...sparkleOptions }) => {
    const containerRef = useRef(null);
    const sparkleInstanceRef = useRef(null);
    // Initialize SparkleFall
    useEffect(() => {
        if (containerRef.current) {
            sparkleInstanceRef.current = new SparkleFallLib({
                container: containerRef.current,
                ...sparkleOptions
            });
            if (sparkleOptions.autoStart !== false && !paused) {
                onStart === null || onStart === void 0 ? void 0 : onStart();
            }
        }
        return () => {
            if (sparkleInstanceRef.current) {
                sparkleInstanceRef.current.destroy();
                sparkleInstanceRef.current = null;
            }
        };
    }, []); // Only run on mount/unmount
    // Handle pause/resume
    useEffect(() => {
        if (sparkleInstanceRef.current) {
            if (paused) {
                sparkleInstanceRef.current.stop();
                onStop === null || onStop === void 0 ? void 0 : onStop();
            }
            else {
                sparkleInstanceRef.current.start();
                onStart === null || onStart === void 0 ? void 0 : onStart();
            }
        }
    }, [paused, onStart, onStop]);
    // Handle config updates
    useEffect(() => {
        if (sparkleInstanceRef.current) {
            sparkleInstanceRef.current.updateConfig(sparkleOptions);
        }
    }, [
        sparkleOptions.interval,
        sparkleOptions.wind,
        sparkleOptions.maxSparkles,
        sparkleOptions.minSize,
        sparkleOptions.maxSize,
        sparkleOptions.minDuration,
        sparkleOptions.maxDuration,
        sparkleOptions.spin
    ]);
    return (React.createElement("div", { ref: containerRef, className: `sparklefall-container ${className}`, style: {
            position: 'relative',
            ...style
        } }, children));
};

/**
 * React hook for controlling SparkleFall animations
 * Provides programmatic control over sparkle animations
 */
const useSparkleFall = (options = {}) => {
    const sparkleInstanceRef = useRef(null);
    const [isRunning, setIsRunning] = useState(false);
    useEffect(() => {
        sparkleInstanceRef.current = new SparkleFallLib(options);
        setIsRunning(sparkleInstanceRef.current.isRunning);
        return () => {
            if (sparkleInstanceRef.current) {
                sparkleInstanceRef.current.destroy();
                sparkleInstanceRef.current = null;
            }
        };
    }, []);
    const start = () => {
        if (sparkleInstanceRef.current) {
            sparkleInstanceRef.current.start();
            setIsRunning(true);
        }
    };
    const stop = () => {
        if (sparkleInstanceRef.current) {
            sparkleInstanceRef.current.stop();
            setIsRunning(false);
        }
    };
    const clear = () => {
        if (sparkleInstanceRef.current) {
            sparkleInstanceRef.current.clear();
            setIsRunning(false);
        }
    };
    const burst = (count = 10) => {
        if (sparkleInstanceRef.current) {
            sparkleInstanceRef.current.burst(count);
        }
    };
    const updateConfig = (newOptions) => {
        if (sparkleInstanceRef.current) {
            sparkleInstanceRef.current.updateConfig(newOptions);
        }
    };
    return {
        start,
        stop,
        clear,
        burst,
        updateConfig,
        isRunning
    };
};

export { SparkleFall, useSparkleFall };
//# sourceMappingURL=index.esm.js.map