useLottie

Getting Started

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;

Params

Param	Type	Required	Default	Description
options	Object	required		Subset of the lottie-web options
options.animationData	Object	required		A JSON Object with the exported animation data
options.loop	boolean\|number	optional	true	Set it to true for infinite amount of loops, or pass a number to specify how many times should the last segment played be looped (More info)
options.autoplay	boolean	optional	true	If set to true, animation will play as soon as it's loaded
options.initialSegment	array	optional		Expects an array of length 2. First value is the initial frame, second value is the final frame. If this is set, the animation will start at this position in time instead of the exported value from AE
style	Object	optional		Style object that applies to the animation wrapper (which is a `div`)

Returns

Property	Type
Lottie	Object
Lottie.View	React.Element
Lottie.play	method
Lottie.stop	method
Lottie.pause	method
Lottie.setSpeed	method
Lottie.goToAndStop	method
Lottie.goToAndPlay	method
Lottie.setDirection	method
Lottie.playSegments	method
Lottie.setSubframe	method
Lottie.getDuration	method
Lottie.destroy	method

useLottie

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Getting Started

Params

Returns

Getting Started