@kubit-ui-web/react-components/dist/esm/components/thirdPartyAnimation/thirdPartyAnimation.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import lottie from 'lottie-web';
import { useStyles } from '../../hooks/useStyles/useStyles';
import { ThirdPartyAnimationStandAlone } from './thirdPartyAnimationStandAlone';
const THIRD_PARTY_ANIMATION_STYLES = 'THIRD_PARTY_ANIMATION_STYLES';
const ThirdPartyAnimationComponent = ({ autoplay = true, loop = true, variant, ...props }, ref) => {
    const [animation, setAnimation] = React.useState();
    const variantTheme = useStyles(THIRD_PARTY_ANIMATION_STYLES, variant);
    const { thirdPartyAnimationData } = variantTheme;
    const element = React.useRef(null);
    React.useImperativeHandle(ref, () => {
        return element.current;
    }, []);
    React.useEffect(() => {
        if (element.current) {
            animation?.destroy();
            const newAnimation = lottie.loadAnimation({
                autoplay,
                loop,
                animationData: thirdPartyAnimationData,
                container: element.current,
            });
            setAnimation(newAnimation);
        }
        return () => {
            animation?.destroy();
        };
    }, [thirdPartyAnimationData]);
    return _jsx(ThirdPartyAnimationStandAlone, { ref: element, ...props });
};
/**
 * @deprecated This component has been deprecated and will be removed in the next MAJOR release.
 *
 * ThirdPartyAnimation component is a component that can be used to create third-party animations.
 * @param {React.PropsWithChildren<IThirdPartyAnimation<V>>} props
 * @returns {JSX.Element}
 */
const ThirdPartyAnimation = React.forwardRef(ThirdPartyAnimationComponent);
export { ThirdPartyAnimation };
//# sourceMappingURL=thirdPartyAnimation.js.map