Listening on Events

Use a callback for onEvent to intercept events. Use the second parameter of the callback function for event params.

pageEvents

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

const App = () => {
  const [frame, setFrame] = useState(0);
  const [seeker, setSeeker] = useState("0%");

  return (
    <div>
      <DotLottiePlayer
        style={{ height: "500px" }}
        onEvent={(event, params) => {
          // Intercept any event from PlayerEvents in here

          // Listen for player ready
          if (event === PlayerEvents.Ready) {
            console.log("player ready!");
          }

          // Listening for frame change
          if (event === PlayerEvents.Frame) {
            const { frame, seeker } = params as Record<string, number>;

            setFrame(frame);
            setSeeker(`${seeker.toFixed(2)}%`);
          }
        }}
        src="https://lottie.host/ffebcde0-ed6d-451a-b86a-35f693f249d7/7BMTlaBW7h.lottie"
        autoplay
        loop
      >
        <Controls />
      </DotLottiePlayer>

      {/* Frame and Seeker display */}
      <div>
        <label>
          Frame: <input value={frame} disabled />
        </label>
        <label>
          Seeker: <input value={seeker} disabled />
        </label>
      </div>
    </div>
  );
};

export default App;