{"library":"react-lottie-player","title":"React Lottie Player","description":"React Lottie Player is a component library for integrating Lottie animations into React applications with a fully declarative API. It wraps the core `lottie-web` library, aiming to provide a more robust experience by correctly handling prop changes for playback control and claiming to prevent memory leaks often associated with `lottie-web` repeaters. The current stable version, `2.1.0`, was published approximately two years ago, suggesting a mature and stable but not rapidly updated codebase for this specific package. Key differentiators include its declarative nature, seamless control of animation states (play, pause, loop, segments) via props, and the provision of a `LottiePlayerLight` variant that avoids the use of `eval` for environments with strict Content Security Policies.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-lottie-player"],"cli":null},"imports":["import Lottie from 'react-lottie-player'","import Lottie from 'react-lottie-player/dist/LottiePlayerLight'","const lottieRef = useRef<LottieRefCurrent | null>(null);"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useEffect, useState, useRef } from 'react';\nimport Lottie from 'react-lottie-player';\n// Alternatively for environments with strict CSPs or SSR, use the 'Light' version:\n// import Lottie from 'react-lottie-player/dist/LottiePlayerLight';\n\ninterface LottieAnimationData {\n  v: string;\n  fr: number;\n  ip: number;\n  op: number;\n  w: number;\n  h: number;\n  nm: string;\n  assets: any[];\n  layers: any[];\n}\n\nconst LottiePlayerExample: React.FC = () => {\n  const [animationData, setAnimationData] = useState<LottieAnimationData | null>(null);\n  const lottieRef = useRef<any>(null); // Type 'any' for simplicity; typically more specific lottie-web instance type\n\n  useEffect(() => {\n    // Dynamically import animation data, useful for code splitting large JSON files\n    import('./my-lottie-animation.json')\n      .then(module => setAnimationData(module.default as LottieAnimationData))\n      .catch(error => console.error('Failed to load Lottie animation:', error));\n  }, []);\n\n  if (!animationData) {\n    return <div>Loading Lottie animation...</div>;\n  }\n\n  return (\n    <div>\n      <h1>My Lottie Animation</h1>\n      <Lottie\n        loop\n        play\n        animationData={animationData}\n        lottieRef={lottieRef}\n        style={{ width: 300, height: 300, border: '1px solid #eee' }}\n        onEvent={(event: string) => {\n          // console.log(`Lottie Event: ${event}`);\n          if (event === 'complete') {\n            console.log('Animation completed!');\n          }\n        }}\n      />\n      <button onClick={() => lottieRef.current?.play()}>Play</button>\n      <button onClick={() => lottieRef.current?.pause()}>Pause</button>\n      <button onClick={() => lottieRef.current?.stop()}>Stop</button>\n      <button onClick={() => lottieRef.current?.setSpeed(lottieRef.current?.getSpeed() * 1.5)}>Speed Up</button>\n    </div>\n  );\n};\n\nexport default LottiePlayerExample;\n","lang":"typescript","description":"This quickstart demonstrates how to import and render a Lottie animation using `react-lottie-player`. It shows loading animation data asynchronously, setting common props like `loop` and `play`, applying styles, and using a ref for imperative playback control (play, pause, stop, speed). It includes type definitions for clarity.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}