react-lottie

library1.2.10jsnpmunverified

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.

web-framework

npm install react-lottie

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-LOTTIE

react-lottie

web-frameworkjavascriptv1.2.10

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Lottie

✓ import Lottie from 'react-lottie';

✗ import { Lottie } from 'react-lottie';

The `Lottie` component is a default export, not a named export. Attempting to destructure it as a named export will result in an error.

animationData (JSON)

✓ import * as animationData from './path/to/animation.json';

✗ import animationData from './path/to/animation.json';

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.

Lottie (CommonJS)

✓ const Lottie = require('react-lottie').default;

✗ const Lottie = require('react-lottie');

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.

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.

import React, { useState } from 'react'; import Lottie from 'react-lottie'; import * as animationData from './pinjump.json'; // Ensure this file exists in your project // To run this example, first install: npm install --save react-lottie export default function LottieControl() { const [isStopped, setIsStopped] = useState(false); const [isPaused, setIsPaused] = useState(false); const buttonStyle = { display: 'block', margin: '10px auto', padding: '8px 15px', fontSize: '16px', cursor: 'pointer' }; const defaultOptions = { loop: true, autoplay: true, animationData: animationData, // The imported JSON animation data rendererSettings: { preserveAspectRatio: 'xMidYMid slice' } }; return ( <div style={{ textAlign: 'center', padding: '20px' }}> <h1>Lottie Animation Example</h1> <Lottie options={defaultOptions} height={400} width={400} isStopped={isStopped} isPaused={isPaused} /> <button style={buttonStyle} onClick={() => setIsStopped(true)}>Stop</button> <button style={buttonStyle} onClick={() => setIsStopped(false)}>Play</button> <button style={buttonStyle} onClick={() => setIsPaused(!isPaused)}>Pause/Resume</button> </div> ); }

Debug

Known issues

breakingThe `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.

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.

affects: >=1.0.0

gotchaThis 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.

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.

affects: >=1.0.0

gotchaDue to its age, `react-lottie` may have sub-optimal performance characteristics compared to newer implementations, especially concerning animations with many layers or complex interactions.

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.

affects: >=1.0.0

gotchaThe 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.

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.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'play') at Lottie.componentDidMount

The `animationData` prop in `options` is missing, `null`, or undefined when the component tries to initialize the Lottie animation.

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.

Warning: componentWillReceiveProps has been renamed, and is not recommended for use.

This warning occurs because `react-lottie` internally uses deprecated React lifecycle methods, which are flagged by newer React versions.

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.

Module not found: Error: Can't resolve 'react-lottie'

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).

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`.

Upgrade

Version history

1.2.10latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for React component functionality.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/chenqingspring/react-lottie ↗

packagehttps://www.npmjs.com/package/react-lottie ↗