lottie-reactReference
LottieLoading and LottieError
The two overlays, their props, and the loading overlay's knobs.
import { Lottie, LottieDisplay, LottieError, type LottieHandle,} from "lottie-react";import { useRef } from "react";export function ErrorOverlay() { const handle = useRef<LottieHandle>(null); return ( <Lottie src="/missing.json" lottieRef={handle}> <LottieDisplay /> <LottieError> <button type="button" onClick={() => handle.current?.reload()}> Try again </button> </LottieError> </Lottie> );}LottieLoading
Appears during the loading state, a spinner by default.
| Prop | Type | Behaviour |
|---|---|---|
lottie | LottieInstance | The animation watched. Omit it inside <Lottie>. |
showAfter | number | Milliseconds before it appears. Default 400, so a fast load never flashes. |
Two custom properties reach the same knobs from CSS, at any level from the element to :root: --lottie-loading-delay (the wait) and --lottie-loading-fade (the fade-in, default 150ms).
Under a reduced-motion preference the spinner turns at half speed rather than stopping.
LottieError
Appears in the error state, a plain sentence by default.
| Prop | Type | Behaviour |
|---|---|---|
lottie | LottieInstance | The animation watched. Omit it inside <Lottie>. |
children | ReactNode | Replaces the default content; a button offering reload() is the worked example. |
Both overlays render a fixed div, accept the standard HTML attributes, and position themselves over the display area.
Loading and errors teaches both.