@brizy/ui/es/Lottie/index.js

React elements in Brizy style

import { useLottie } from "lottie-react";
import React, { useCallback, useEffect, useRef } from "react";
import { classNames } from "../classNamesFn";
export var Renderer;
(function (Renderer) {
    Renderer["svg"] = "svg";
    Renderer["canvas"] = "canvas";
    Renderer["html"] = "html";
})(Renderer || (Renderer = {}));
export const Lottie = ({ isLoop, isAutoplay, animationData, speed = 1, direction = 1, renderer }) => {
    const preserveAspectRatio = renderer === Renderer.svg ? "xMidYMid slice" : "xMidYMid meet";
    const options = {
        loop: isLoop,
        autoplay: isAutoplay,
        animationData,
        // @ts-expect-error lottie-react renderer type is missing canvas
        renderer,
        rendererSettings: {
            preserveAspectRatio,
        },
    };
    const { play, stop, getDuration, goToAndPlay, setSpeed, setDirection, View } = useLottie(options);
    const speedRef = useRef(speed);
    const handleAnimation = useCallback(() => {
        if (!isAutoplay) {
            return stop();
        }
        // play reverse animation when component mounts
        if (direction === -1 && speedRef.current === speed) {
            const duration = getDuration(true);
            if (duration) {
                return goToAndPlay(duration, true);
            }
        }
        speedRef.current = speed;
        play();
    }, [getDuration, goToAndPlay, play, stop, direction, isAutoplay, speed]);
    useEffect(() => {
        setSpeed(speed);
        setDirection(direction);
        handleAnimation();
    }, [setDirection, setSpeed, handleAnimation, direction, speed]);
    return React.cloneElement(View, {
        className: classNames()("lottie", {
            lottie__html: renderer === Renderer.html,
        }),
    });
};