Basics

import { Lottie } from "lottie-react";export function FirstAnimation() {  return <Lottie src="/anim.json" autoplay loop />;}

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

import { Lottie } from "lottie-react";import { useState } from "react";export function SpeedAndDirection() {  const [speed, setSpeed] = useState(1);  const [reversed, setReversed] = useState(false);  return (    <>      <Lottie        src="/anim.json"        autoplay        loop        speed={speed}        direction={reversed ? "reverse" : "forward"}      />      <div>        <button          type="button"          onClick={() =>            setSpeed((current) => (current >= 4 ? 0.5 : current * 2))          }        >          speed {speed}x        </button>        <button          type="button"          onClick={() => setReversed((current) => !current)}        >          {reversed ? "reverse" : "forward"}        </button>      </div>    </>  );}

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>  );}

import { Lottie, type LottieHandle } from "lottie-react";import { useRef } from "react";export function AsButton() {  const handle = useRef<LottieHandle>(null);  return (    <Lottie      as="button"      src="/anim.json"      lottieRef={handle}      onClick={() => handle.current?.play()}      aria-label="Play the logo"    />  );}