{"library":"react-lottie","title":"Lottie Animation View for React","description":"react-lottie is a React component that wraps `bodymovin.js` (now known as Lottie Web) to render animations exported from Adobe After Effects as JSON. The current stable version, 1.2.10, was released in 2018. It allows developers to integrate vector animations into React applications, offering programmatic control over playback (play, pause, stop), and supporting various After Effects features like shape layers, masks, and trim paths. Its key differentiators include enabling interactive animations with small file sizes, and the ability to load animation data from local assets or remote APIs. However, due to its age and lack of maintenance, developers should be aware of potential compatibility issues with modern React versions and ecosystem changes, making newer alternatives a more robust choice for contemporary projects.","language":"javascript","status":"abandoned","last_verified":"Sun Apr 19","install":{"commands":["npm install react-lottie"],"cli":null},"imports":["import Lottie from 'react-lottie';","import * as animationData from './path/to/animation.json';","const Lottie = require('react-lottie').default;"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport Lottie from 'react-lottie';\nimport * as animationData from './pinjump.json'; // Ensure this file exists in your project\n\n// To run this example, first install: npm install --save react-lottie\n\nexport default function LottieControl() {\n  const [isStopped, setIsStopped] = useState(false);\n  const [isPaused, setIsPaused] = useState(false);\n\n  const buttonStyle = {\n    display: 'block',\n    margin: '10px auto',\n    padding: '8px 15px',\n    fontSize: '16px',\n    cursor: 'pointer'\n  };\n\n  const defaultOptions = {\n    loop: true,\n    autoplay: true, \n    animationData: animationData, // The imported JSON animation data\n    rendererSettings: {\n      preserveAspectRatio: 'xMidYMid slice'\n    }\n  };\n\n  return (\n    <div style={{ textAlign: 'center', padding: '20px' }}>\n      <h1>Lottie Animation Example</h1>\n      <Lottie \n        options={defaultOptions}\n        height={400}\n        width={400}\n        isStopped={isStopped}\n        isPaused={isPaused}\n      />\n      <button style={buttonStyle} onClick={() => setIsStopped(true)}>Stop</button>\n      <button style={buttonStyle} onClick={() => setIsStopped(false)}>Play</button>\n      <button style={buttonStyle} onClick={() => setIsPaused(!isPaused)}>Pause/Resume</button>\n    </div>\n  );\n}","lang":"typescript","description":"This quickstart demonstrates how to embed and control a Lottie animation using the `react-lottie` component, including play, pause, and stop functionality, with basic state management.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}