lottie-reactReference
LottieDisplay
The element the animation draws inside, for layouts you own.
The logo, placed by you
import { Lottie, LottieDisplay } from "lottie-react";export function YourOwnLayout() { return ( <Lottie src="/anim.json" autoplay loop> <p>The logo, placed by you</p> <LottieDisplay /> </Lottie> );}Props
| Prop | Type | Behaviour |
|---|---|---|
as | tag name | The element to render. Default div. |
lottie | LottieInstance | The animation to display. Omit it inside <Lottie>, where the context supplies it. |
children | never | Refused: the engine owns the contents and wipes them on every reload. |
Plus any standard HTML attribute, and ref names the rendered element.
Render it among <Lottie>'s children to place the animation yourself, or anywhere at all with lottie from the hook.