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>
}
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.