This library is no longer maintained. Making your own simple wrapper isn't difficult...

If you need something complex, then react-lottie-player looks good. Otherwise the code below is all you need to display a lottie animation on your page. There is no play/pause logic here but that wouldn’t be too tricky to add. Just thought I’d post this in case anyone is wondering how much work it will be to get something working themselves.

import { useEffect, useRef } from "react"

import lottie from "lottie-web"

interface LottieProps {
  animationData: any
  width: number
  height: number
}

export const Lottie = ({ animationData, width, height }: LottieProps) => {
  const element = useRef<HTMLDivElement>(null)
  const lottieInstance = useRef<any>()

  useEffect(() => {
    if (element.current) {
      lottieInstance.current = lottie.loadAnimation({
        animationData,
        container: element.current,
      })
    }
    return () => {
      lottieInstance.current?.destroy()
    }
  }, [animationData])

  return <div style={{ width, height }} ref={element}></div>
}

[granolocks]

I was getting this vibe too. Sad to see since it worked fairly well but this is a nice base for a shim. Thank you @funwithtriangles

[funwithtriangles]

@funwithtriangles Could you help me get segments to work with this? I can’t seem to figure it out. I’m trying to get it to play all frames on the first loop, and then only frames 24-95 on every loop thereafter.

Currently, I have: segments: {[ [0, 23],[24, 95]], true},

Sorry, I don’t know the API very well! I was just posting a simple example that I thought might help others with similar simple needs. If you need anything more complex, then maybe react-lottie-player is more suitable.