How to access and use the useLottie returns

user_8466923 0
Viewed 199

I am just trying to understand how the lottie-react return parameters can be accessed from a component. In the example component that they have setup, there is a list of returns https://gamote.github.io/lottie-react/hooks/useLottie#returns.

For example, how can I access Lottie.setDirection() to set it to -1 on click so the animation plays backwards? Or Lottie.pause() to pause the animation?

    import { useLottie } from "lottie-react";
    import groovyWalkAnimation from "./groovyWalk.json";

    const style = {
      height: 300,
    };

    const Example = () => {
      const options = {
        animationData: groovyWalkAnimation,
        loop: true,
        autoplay: true,
      };
      const { View } = useLottie(options, style);
      return View;
    };

    export default Example;
lottie reactjs
1 Answers

The methods you're looking for are returned next to the View property by the useLottie hook. Example with play() and pause() methods:

import { FC } from "react";
import { useLottie } from "lottie-react";
import groovyWalkAnimation from "./groovyWalk.json";

export const MyApp: FC = () => {
  // 1) destructuring required methods from `useLottie`s response
  const {  View, play, pause } = useLottie({
    animationData: groovyWalkAnimation,
    loop: true,
    autoplay: true
  });

  // 2) Usege of the methods
  return (
    <>
      <h1>My awesome animation</h1>

      {View}

      <button onClick={() => play()}>Play</button>
      <button onClick={() => pause()}>Pause</button>
    </>
  );
}
user_108782440
Related