{"library":"lottie-react","title":"Lottie Animations for React","description":"lottie-react is a React library that provides components and hooks for integrating Lottie animations into web applications. It acts as a lightweight wrapper around the `lottie-web` library, offering developers granular control over Lottie instances with minimal implementation effort. Currently at stable version 2.4.1, the library maintains a fairly active release cadence, with multiple patch and minor updates released to support newer React versions (up to 19) and address various fixes. Its key differentiators include offering both a `Lottie` component and `useLottie`/`useLottieInteractivity` hooks, providing flexibility for different use cases, and abstracting away the direct `lottie-web` integration while allowing access to its underlying API. Future versions, including `v3`, are actively under development, promising further features and improvements.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install lottie-react"],"cli":null},"imports":["import Lottie from 'lottie-react';","import { useLottie } from 'lottie-react';","import { useLottieInteractivity } from 'lottie-react';","import type { RendererType } from 'lottie-react';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport Lottie from 'lottie-react';\nimport groovyWalkAnimation from './groovyWalk.json'; // Ensure you have a Lottie JSON animation file\n\nconst App = () => {\n  return (\n    <div style={{ width: 300, height: 300, margin: 'auto' }}>\n      <Lottie animationData={groovyWalkAnimation} loop={true} />\n    </div>\n  );\n};\n\nexport default App;","lang":"typescript","description":"Demonstrates the basic usage of the Lottie component to display a looping animation from a local JSON file.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}