{"id":11745,"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.","status":"abandoned","version":"1.2.10","language":"javascript","source_language":"en","source_url":"https://github.com/chenqingspring/react-lottie","tags":["javascript"],"install":[{"cmd":"npm install react-lottie","lang":"bash","label":"npm"},{"cmd":"yarn add react-lottie","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-lottie","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for React component functionality.","package":"react","optional":false}],"imports":[{"note":"The `Lottie` component is a default export, not a named export. Attempting to destructure it as a named export will result in an error.","wrong":"import { Lottie } from 'react-lottie';","symbol":"Lottie","correct":"import Lottie from 'react-lottie';"},{"note":"JSON files imported directly into JavaScript/TypeScript are typically treated as modules, with their content accessible via a named export (e.g., `default`) or a namespace import (`* as`). The `* as` pattern is generally safer for broad compatibility.","wrong":"import animationData from './path/to/animation.json';","symbol":"animationData (JSON)","correct":"import * as animationData from './path/to/animation.json';"},{"note":"When using CommonJS `require()` in environments that don't automatically resolve ESM `default` exports, you'll likely need to explicitly access the `.default` property to get the component.","wrong":"const Lottie = require('react-lottie');","symbol":"Lottie (CommonJS)","correct":"const Lottie = require('react-lottie').default;"}],"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."},"warnings":[{"fix":"For new projects or if encountering issues with newer React versions, strongly consider using actively maintained alternatives such as `@lottiefiles/react-lottie-player` or `lottie-react` which provide better compatibility and features.","message":"The `react-lottie` package is effectively abandoned and has not been updated since 2018. It relies on an outdated version of `bodymovin.js` (now `lottie-web`) and may have compatibility issues with modern React versions (e.g., React 18+), strict mode, or contemporary build tools.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"There is no direct fix within `react-lottie` itself. The best approach is to migrate to a modern Lottie player for React that adheres to current React best practices and lifecycle conventions.","message":"This package uses deprecated React lifecycle methods (e.g., `componentWillReceiveProps`) internally. While this often results only in console warnings in newer React versions, it might lead to unexpected behavior or future breakage.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Monitor performance metrics and consider profiling animations. If performance is a critical concern, newer libraries or direct `lottie-web` integration might offer better control and optimization opportunities.","message":"Due to its age, `react-lottie` may have sub-optimal performance characteristics compared to newer implementations, especially concerning animations with many layers or complex interactions.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Be aware that external resources and community support for 'bodymovin.js' specifically may be scarce. When searching for solutions or understanding features, focus on 'lottie-web' documentation, understanding that `react-lottie` wraps an older version of it.","message":"The documentation and underlying library references in `react-lottie` still refer to `bodymovin.js`, which has since been renamed to `lottie-web`. This indicates the library is not aligned with the current Lottie ecosystem.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure that your `.json` animation file is correctly imported (e.g., `import * as animationData from './myAnimation.json'`) and passed as `animationData: animationData` within the `options` prop object.","cause":"The `animationData` prop in `options` is missing, `null`, or undefined when the component tries to initialize the Lottie animation.","error":"TypeError: Cannot read properties of undefined (reading 'play') at Lottie.componentDidMount"},{"fix":"This is a warning originating from the unmaintained library itself and doesn't directly indicate a problem with your code. While it's often harmless, for a clean console and future compatibility, migrating to a different, actively maintained Lottie player for React is recommended.","cause":"This warning occurs because `react-lottie` internally uses deprecated React lifecycle methods, which are flagged by newer React versions.","error":"Warning: componentWillReceiveProps has been renamed, and is not recommended for use."},{"fix":"First, ensure `npm install --save react-lottie` or `yarn add react-lottie` has been run. If the issue persists, check your bundler (Webpack, Rollup, Vite) configuration to ensure it correctly handles CommonJS modules from `node_modules`.","cause":"The `react-lottie` package has not been installed, or there's a bundler configuration issue preventing its resolution (e.g., trying to import CJS in an ESM-only context without proper transpilation).","error":"Module not found: Error: Can't resolve 'react-lottie'"}],"ecosystem":"npm"}