@ecoding/helper.dynamic

TODO: description

Usage

// @/utils/http/dynamic-module.ts
import { dynamicModule } from "@ecoding/helper.dynamic";
import type { LottiePlayer } from "lottie-web";
const modules = {
    lottie: () => import(/* webpackChunkName: "lottie" */ "lottie-web/build/player/lottie_svg")
};

dynamicModule.setModules(modules);
export type TypeLottieAsync = LottiePlayer;
export { dynamicModule } from "@ecoding/helper.dynamic";


// app.ts
import React, { useEffect, useRef } from "react";
import env from "@ecoding/helper.env";
import { TypeLottieAsync, dynamicModule } from "@/utils/http/dynamic-module";

let lottieAsync: Promise<TypeLottieAsync>;

if (env.isWeb) {
    lottieAsync = dynamicModule.execute("lottie");
}
const C: React.FC = () => {
    const refDiv = useRef<HTMLDivElement>(null);

    useEffect(() => {
        lottieAsync.then((lottie) => {
            lottie.setQuality("low");
            const dom = lottie.loadAnimation({
                path: "https://gw.alipayobjects.com/os/finxbff/e502590c-dd48-4566-9ef1-55bdd47510de/b490fcbf-8fbe-4a3b-87c6-3a70032459ba.json",
                container: refDiv.current!,
                loop: false,
                autoplay: false
            });
            dom.setDirection(1);
            dom.goToAndPlay(0, true);
            dom.removeEventListener("complete");
            dom.addEventListener("complete", () => {
                console.log("done");
            });
        });
    }, []);

    return (
        <div>
            <div ref={refDiv} style={{ height: 200, width: 200 }}>
                ddd
            </div>
        </div>
    );
};

export default C;