Getting Lottie Instance

The getLottie() method returns the Lottie animation instance that you can use to set data and call methods as described in the bodymovin documentation.

The following example demonstrates how to retrieving the Lottie instance.

import { useRef, useState } from "react";
import type { AnimationItem } from "@dotlottie/react-player";
import { DotLottiePlayer, Controls, PlayerEvents } from "@dotlottie/react-player";
import "@dotlottie/react-player/dist/index.css";

const App = () => {
  const lottieRef = useRef<DotLottieRefProps>();
  const [lottie, setLottie] = useState<AnimationItem>();

  return (
    <div>
      <DotLottiePlayer
        lottieRef={lottieRef}
        style={{ height: "500px" }}
        onEvent={(event) => {
          if (event === PlayerEvents.Ready) {
            setLottie(lottieRef.current?.getLottie())
          }
        }}
        src="https://lottie.host/ffebcde0-ed6d-451a-b86a-35f693f249d7/7BMTlaBW7h.lottie"
        autoplay
        loop
      >
        <Controls />
      </DotLottiePlayer>
    </div>
  );
};

export default App;