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.
Unsized, it fills its parent's width, and with the default svg renderer its height follows the animation's aspect ratio, like an image; size it to change that.
Render it among <Lottie>'s children to place the animation yourself, or anywhere at all with lottie from the hook.