lottie-reactExamples
Interactions
Hover, click and state recipes, ready to take.
Play on hover
Enter to play, leave to pause; pointer events cover mouse and touch:
import { LottieDisplay, useLottie } from "lottie-react";export function HoverPlay() { const lottie = useLottie({ src: "/anim.json", loop: true }); return ( <LottieDisplay lottie={lottie} onPointerEnter={() => lottie.play()} onPointerLeave={() => lottie.pause()} /> );}Play on click
Each press restarts from the top: seek, then play:
import { Lottie, type LottieHandle } from "lottie-react";import { useRef } from "react";export function PlayOnClick() { const handle = useRef<LottieHandle>(null); const restart = () => { handle.current?.seek(0); handle.current?.play(); }; return ( <Lottie as="button" src="/anim.json" lottieRef={handle} onClick={restart} aria-label="Play from the top" /> );}Segment on state
The playing range follows React state, so anything that sets the state steers the animation:
import { LottieDisplay, useLottie } from "lottie-react";import { useEffect, useState } from "react";const parts = { grow: [0, 60], settle: [60, 120],} as const;export function SegmentOnState() { const [part, setPart] = useState<keyof typeof parts>("grow"); const lottie = useLottie({ src: "/anim.json", autoplay: true, loop: true }); const { playSegments } = lottie; useEffect(() => { playSegments(parts[part]); }, [part, playSegments]); return ( <> <LottieDisplay lottie={lottie} /> <div> <button type="button" onClick={() => setPart("grow")}> grow </button> <button type="button" onClick={() => setPart("settle")}> settle </button> </div> </> );}