First animation

The component

Import Lottie, point src at an animation, and give the element a size:

import { Lottie } from "lottie-react";export function Sizing() {  return (    <Lottie src="/anim.json" autoplay loop style={{ width: 160, height: 96 }} />  );}

src takes a served path, a URL, or the parsed animation itself. The size matters: the animation fills its element, and an element with no height shows nothing.

The hook

The same animation with useLottie, when the element should be yours:

import { useLottie } from "lottie-react";export function FirstAnimationHook() {  const lottie = useLottie({ src: "/anim.json", autoplay: true, loop: true });  return <div ref={lottie.setDisplayRef} style={{ width: 128, height: 128 }} />;}

Hand setDisplayRef to the element the animation draws inside. Nothing appears until an element carries it.

Which to pick

Start with the component. Reach for the hook when you want to own the element and hold the instance directly.

Next

Rendering: the src forms, starting, repeating, and sizing.