react-lottie 1.2.10 → 2.0.0

package/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [2.0.0](https://github.com/chenqingspring/react-lottie/compare/v1.2.10...v2.0.0) (2026-11-04)
+
+This release folds in the changes that were prepared as 1.2.11 (never
+published) and modernizes the development toolchain.
+
+### Breaking Changes
+
+* the `react` peer dependency is now `>=16.8.0` (previously `>=15.0.0`);
+  React 15 is no longer supported. The component is tested against React 18
+  and works with React 19.
+* import animation JSON with a default import
+  (`import animationData from './pinjump.json'`). A namespace import
+  (`import * as animationData`) yields a frozen ESM module object that
+  lottie-web cannot annotate, which fails under Vite and other strict ESM
+  bundlers.
+
+### Features
+
+* add a `tabIndex` prop so presentational animations can be removed from the tab order ([#130](https://github.com/chenqingspring/react-lottie/issues/130))
+* support the `renderer` option and document it in the README
+* print a highlighted maintenance banner after `npm install` (maintained automatically by Relay; report bugs and feature requests on GitHub; https://get-relay.cc) and document it in the README
+
+### Bug Fixes
+
+* leave playback alone on re-renders unless a playback prop changed, so an `autoplay: false` animation no longer starts itself and a paused one is not restarted; a re-created but equal `segments` array no longer replays the animation ([#32](https://github.com/chenqingspring/react-lottie/issues/32), [#43](https://github.com/chenqingspring/react-lottie/issues/43))
+* apply the initial `isStopped`, `isPaused` and `direction` props on mount instead of only on update
+* replay changed segments immediately by passing `force` to `playSegments` ([#82](https://github.com/chenqingspring/react-lottie/issues/82))
+* reload the animation when the remote `path` option changes ([#99](https://github.com/chenqingspring/react-lottie/issues/99))
+* run the data/path reload on modern React instead of the deprecated `componentWillUpdate` ([#77](https://github.com/chenqingspring/react-lottie/issues/77))
+* guard `destroy()` when the animation was never created ([#51](https://github.com/chenqingspring/react-lottie/issues/51))
+* make the imperative `pause()` method actually pause, and stop restarting a paused animation on unrelated prop updates ([#58](https://github.com/chenqingspring/react-lottie/issues/58))
+* drop the runtime dependency on `babel-runtime`, which broke consumers' builds ([#177](https://github.com/chenqingspring/react-lottie/issues/177))
+
 ### [1.2.10](https://github.com/chenqingspring/react-lottie/compare/v1.2.9...v1.2.10) (2024-11-30)
 
 

package/README.md

@@ -5,9 +5,9 @@
 ## Demo
 https://chenqingspring.github.io/react-lottie
 
-## Wapper of bodymovin.js
+## Wrapper of lottie-web
 
-[bodymovin](https://github.com/bodymovin/bodymovin) is [Adobe After Effects](http://www.adobe.com/products/aftereffects.html) plugin for exporting animations as JSON, also it provide bodymovin.js for render them as svg/canvas/html.
+[lottie-web](https://github.com/airbnb/lottie-web) (previously Bodymovin) is an [Adobe After Effects](http://www.adobe.com/products/aftereffects.html) plugin for exporting animations as JSON. It also provides the player that renders them as svg/canvas/html.
 
 ## Why Lottie?
 
@@ -31,6 +31,46 @@ Install through npm:
 npm install --save react-lottie
 ```
 
+> **Note:** react-lottie is maintained automatically by Relay. Learn more at
+> [get-relay.cc](https://get-relay.cc).
+>
+> Found a bug or have a feature request? Open an issue on
+> [GitHub](https://github.com/chenqingspring/react-lottie/issues) and Relay
+> will review and fix it.
+
+## Requirements
+
+React 16.8 or newer. The test suite runs against React 18; the component uses
+plain class components and works with React 19 as well.
+
+## Local development
+
+Run the Storybook stories with `npm start` (port 9010) and the test suite with
+`npm test`.
+
+## TypeScript
+
+Type definitions are maintained on DefinitelyTyped and track this package's
+props. Install them alongside the package:
+
+```
+npm install --save-dev @types/react-lottie
+```
+
+TypeScript picks the declarations up automatically, so no import changes are
+needed.
+
+## Testing
+
+`lottie-web` probes canvas support when it is imported, so a jsdom-based test
+runner needs a canvas implementation before the component is loaded. With Jest
+(the default for Create React App), add [`jest-canvas-mock`](https://github.com/hustcc/jest-canvas-mock)
+to your setup file:
+
+```javascript
+import 'jest-canvas-mock';
+```
+
 ## Usage
 
 Import pinjump.json as animation data
@@ -38,7 +78,7 @@ Import pinjump.json as animation data
 ```jsx
 import React from 'react'
 import Lottie from 'react-lottie';
-import * as animationData from './pinjump.json'
+import animationData from './pinjump.json'
 
 export default class LottieControl extends React.Component {
 
@@ -56,7 +96,7 @@ export default class LottieControl extends React.Component {
     const defaultOptions = {
       loop: true,
       autoplay: true, 
-      animationData: animationData,
+      animationData: animationData.default,
       rendererSettings: {
         preserveAspectRatio: 'xMidYMid slice'
       }
@@ -77,8 +117,79 @@ export default class LottieControl extends React.Component {
 
 ```
 
+### Play on hover
+
+`eventListeners` takes lottie-web animation events (`complete`, `loopComplete`,
+`enterFrame`, ...), not DOM events. Registering `onMouseOver` or `onMouseLeave`
+there will never fire. Put the DOM handlers on a wrapper element and drive the
+component with props instead.
+
+To play forward on hover and reverse from the current frame on leave, keep the
+animation running and flip `direction`. `isStopped` resets the animation to its
+first frame, so only use it once, to start from a known state.
+
+```jsx
+import React from 'react'
+import Lottie from 'react-lottie';
+import animationData from './pinjump.json'
+
+export default class HoverLottie extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {isStopped: true, direction: 1};
+  }
+
+  render() {
+    const defaultOptions = {
+      loop: false,
+      autoplay: false,
+      animationData: animationData.default,
+      rendererSettings: {
+        preserveAspectRatio: 'xMidYMid slice'
+      }
+    };
+
+    return <div
+      onMouseEnter={() => this.setState({isStopped: false, direction: 1})}
+      onMouseLeave={() => this.setState({direction: -1})}>
+      <Lottie options={defaultOptions}
+              height={100}
+              width={100}
+              isStopped={this.state.isStopped}
+              direction={this.state.direction}
+              isClickToPauseDisabled />
+    </div>
+  }
+}
+
+```
+
+### Play a segment
+
+Pass `segments` to play a frame range instead of the whole animation. The
+frames are the ones shown in After Effects / the lottie editor.
+
+```jsx
+<Lottie options={defaultOptions}
+        height={400}
+        width={400}
+        segments={[45, 90]} />
+```
+
+Changing `segments` while the animation is running restarts playback from the
+new `fromFrame`, so a single state value is enough to switch ranges:
+
+```jsx
+<Lottie options={defaultOptions} segments={this.state.segment} />
+```
+
+A segment also has to be reachable with `loop`/`autoplay` as usual: with
+`loop: false` and `autoplay: false` the range only plays once you flip
+`isStopped` or pass a new `segments` value.
+
 ### props
-The `<Lottie />` Component supports the following components:
+The `<Lottie />` Component supports the following props:
 
 **options** *required*
 
@@ -88,7 +199,11 @@ the object representing the animation settings that will be instantiated by body
 >
 >**autoplay** *options* [default: `false`]
 >
->**animationData** *required*
+>**animationData** *optional* — the exported animation data. Mutually exclusive with `path`.
+>
+>**path** *optional* — a URL (or path) to a JSON animation file. Mutually exclusive with `animationData`.
+>
+>**renderer** *optional* [default: `svg`]
 >
 >**rendererSettings** *required* 
 
@@ -100,9 +215,36 @@ pixel value for containers width.
 
 pixel value for containers height.
 
+**isStopped** *optional* [default: `false`]
+
+Stops the animation and resets it to the first frame. Setting it back to `false`
+resumes playback. Unlike `isPaused`, this discards the current position.
+
+**isPaused** *optional* [default: `false`]
+
+Pauses the animation without losing its current frame. Setting it back to
+`false` resumes from where it stopped.
+
+**speed** *optional* [default: `1`]
+
+Playback rate. `2` plays twice as fast, `0.5` at half speed, and negative
+values play in reverse at that rate.
+
+**direction** *optional* [default: `1`]
+
+`1` plays forward, `-1` plays backward. Changing it keeps the current frame,
+which is what you want for hover-in / hover-out effects.
+
+**segments** *optional* [default: none]
+
+`[fromFrame, toFrame]` to play only part of the animation, e.g. `[45, 90]`.
+The range is applied as soon as the prop is set and re-applied whenever it
+changes, so a new value starts playing that segment immediately even while the
+animation is running. See [Play a segment](#play-a-segment).
+
 **eventListeners** *optional* [default: `[]`]
 
-This is an array of objects containing a `eventName` and `callback` function that will be registered as  eventlisteners on the animation object. refer to [bodymovin#events](https://github.com/bodymovin/bodymovin#events) where the mention using addEventListener, for a list of available custom events.
+This is an array of objects containing a `eventName` and `callback` function that will be registered as  eventlisteners on the animation object. refer to [bodymovin#events](https://github.com/bodymovin/bodymovin#events) where the mention using addEventListener, for a list of available custom events. These are lottie-web animation events, not DOM events: for `onMouseOver`, `onMouseLeave` and friends put the handler on a wrapping element, as shown in [Play on hover](#play-on-hover).
 
 example:
 ```jsx
@@ -117,9 +259,31 @@ eventListeners=[
 **isClickToPauseDisabled** *optional* [default: `false`]
 When this props is left unspecified or is set to `false` animations are paused or resumed when a user clicks or taps them. If you do not want this behaviour set this prop to `true`.
 
+**ariaRole** *optional* [default: `button`]
+
+Role of the rendered container. Pass `img` for a purely decorative animation
+that is described by `ariaLabel`.
+
+**ariaLabel** *optional* [default: `animation`]
+
+Accessible name of the container.
+
+**title** *optional* [default: `''`]
+
+`title` attribute (native tooltip) of the container.
+
+**style** *optional*
+
+Extra inline styles merged onto the container, after the `width`, `height` and
+layout defaults. Use it to override `overflow` or `margin`.
+
+**tabIndex** *optional* [default: `0`]
+Tab order of the rendered container. Pass `-1` for a purely presentational
+animation that should not receive keyboard focus.
+
 ## Related Projects
 
-* [Bodymovin](https://github.com/bodymovin/bodymovin) react-lottie is a wrapper of bodymovin
+* [lottie-web](https://github.com/airbnb/lottie-web) react-lottie is a wrapper of lottie-web
 * [Angular Lottie](https://github.com/chenqingspring/ng-lottie) angular implementation
 * [Vue Lottie](https://github.com/chenqingspring/vue-lottie) vue implementation
 * [React Native Lottie](https://github.com/airbnb/lottie-react-native) react native implementation by airbnb

package/dist/index.js

@@ -1,62 +1,45 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _extends2 = require('babel-runtime/helpers/extends');
-
-var _extends3 = _interopRequireDefault(_extends2);
-
-var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
-
-var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
-
-var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
-
-var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
-
-var _createClass2 = require('babel-runtime/helpers/createClass');
-
-var _createClass3 = _interopRequireDefault(_createClass2);
-
-var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
-
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
-
-var _inherits2 = require('babel-runtime/helpers/inherits');
-
-var _inherits3 = _interopRequireDefault(_inherits2);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _lottieWeb = require('lottie-web');
-
-var _lottieWeb2 = _interopRequireDefault(_lottieWeb);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Lottie = function (_React$Component) {
-  (0, _inherits3.default)(Lottie, _React$Component);
-
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _lottieWeb = _interopRequireDefault(require("lottie-web"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, e) { if ("object" != _typeof(t) || !t) return t; var r; if ("undefined" != typeof Symbol && void 0 !== (r = t[Symbol.toPrimitive])) { var i = r.call(t, e || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === e ? String : Number)(t); }
+var segmentsAreEqual = function segmentsAreEqual(a, b) {
+  if (a === b) return true;
+  if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) return false;
+  return a.every(function (value, index) {
+    return value === b[index];
+  });
+};
+var Lottie = exports["default"] = /*#__PURE__*/function (_React$Component) {
   function Lottie() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    (0, _classCallCheck3.default)(this, Lottie);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+    var _this;
+    _classCallCheck(this, Lottie);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
-    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Lottie.__proto__ || (0, _getPrototypeOf2.default)(Lottie)).call.apply(_ref, [this].concat(args))), _this), _this.handleClickToPause = function () {
+    _this = _callSuper(this, Lottie, [].concat(args));
+    _defineProperty(_this, "handleClickToPause", function () {
       // The pause() method is for handling pausing by passing a prop isPaused
       // This method is for handling the ability to pause by clicking on the animation
       if (_this.anim.isPaused) {
@@ -64,66 +47,83 @@ var Lottie = function (_React$Component) {
       } else {
         _this.anim.pause();
       }
-    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
+    });
+    return _this;
   }
-
-  (0, _createClass3.default)(Lottie, [{
-    key: 'componentDidMount',
+  _inherits(Lottie, _React$Component);
+  return _createClass(Lottie, [{
+    key: "componentDidMount",
     value: function componentDidMount() {
-      var _props = this.props,
-          options = _props.options,
-          eventListeners = _props.eventListeners;
+      var _this$props = this.props,
+        options = _this$props.options,
+        eventListeners = _this$props.eventListeners;
       var loop = options.loop,
-          autoplay = options.autoplay,
-          animationData = options.animationData,
-          rendererSettings = options.rendererSettings,
-          segments = options.segments;
-
-
+        autoplay = options.autoplay,
+        animationData = options.animationData,
+        _options$renderer = options.renderer,
+        renderer = _options$renderer === void 0 ? 'svg' : _options$renderer,
+        rendererSettings = options.rendererSettings,
+        segments = options.segments;
       this.options = {
         container: this.el,
-        renderer: 'svg',
+        renderer: renderer,
         loop: loop !== false,
         autoplay: autoplay !== false,
         segments: segments !== false,
         animationData: animationData,
         rendererSettings: rendererSettings
       };
-
-      this.options = (0, _extends3.default)({}, this.options, options);
-      this.anim = _lottieWeb2.default.loadAnimation(this.options);
+      this.options = _objectSpread(_objectSpread({}, this.options), options);
+      this.anim = _lottieWeb["default"].loadAnimation(this.options);
       this.registerEvents(eventListeners);
       this.setSpeed();
+      this.setDirection();
+
+      /* Apply the initial playback props, which are otherwise only read on update */
+      if (this.props.isStopped) {
+        this.stop();
+      } else if (this.props.isPaused) {
+        this.pause();
+      }
     }
   }, {
-    key: 'componentWillUpdate',
-    value: function componentWillUpdate(nextProps /* , nextState */) {
-      /* Recreate the animation handle if the data is changed */
-      if (this.options.animationData !== nextProps.options.animationData) {
-        this.deRegisterEvents(this.props.eventListeners);
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      /* Recreate the animation handle if the data or its remote path changed.
+         Done here rather than in componentWillUpdate, which React has deprecated
+         and which is unsafe in concurrent rendering (#77, #100, #119). */
+      var dataChanged = this.options.animationData !== this.props.options.animationData;
+      var pathChanged = this.options.path !== this.props.options.path;
+      if (dataChanged || pathChanged) {
+        this.deRegisterEvents(prevProps.eventListeners);
         this.destroy();
-        this.options = (0, _extends3.default)({}, this.options, nextProps.options);
-        this.anim = _lottieWeb2.default.loadAnimation(this.options);
-        this.registerEvents(nextProps.eventListeners);
+        this.options = _objectSpread(_objectSpread({}, this.options), this.props.options);
+        this.anim = _lottieWeb["default"].loadAnimation(this.options);
+        this.registerEvents(this.props.eventListeners);
       }
-    }
-  }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
+
+      /* Only drive playback when a playback prop asks for it. Re-rendering used
+         to call play() unconditionally, which started an animation that was
+         created with `autoplay: false` and restarted one the caller had paused
+         (#32, #43, #58). A newly loaded animation is left to its own `autoplay`
+         setting unless one of the playback props overrides it below. */
+      var playbackChanged = prevProps.isStopped !== this.props.isStopped || prevProps.isPaused !== this.props.isPaused || !segmentsAreEqual(prevProps.segments, this.props.segments);
       if (this.props.isStopped) {
         this.stop();
-      } else if (this.props.segments) {
-        this.playSegments();
-      } else {
-        this.play();
+      } else if (this.props.isPaused) {
+        this.pause();
+      } else if (playbackChanged) {
+        if (this.props.segments) {
+          this.playSegments();
+        } else {
+          this.play();
+        }
       }
-
-      this.pause();
       this.setSpeed();
       this.setDirection();
     }
   }, {
-    key: 'componentWillUnmount',
+    key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this.deRegisterEvents(this.props.eventListeners);
       this.destroy();
@@ -131,104 +131,98 @@ var Lottie = function (_React$Component) {
       this.anim = null;
     }
   }, {
-    key: 'setSpeed',
+    key: "setSpeed",
     value: function setSpeed() {
       this.anim.setSpeed(this.props.speed);
     }
   }, {
-    key: 'setDirection',
+    key: "setDirection",
     value: function setDirection() {
       this.anim.setDirection(this.props.direction);
     }
   }, {
-    key: 'play',
+    key: "play",
     value: function play() {
       this.anim.play();
     }
   }, {
-    key: 'playSegments',
+    key: "playSegments",
     value: function playSegments() {
-      this.anim.playSegments(this.props.segments);
+      /* Passing `force` replays the new segments even if the animation is
+         already running, so a segments prop change takes effect immediately. */
+      this.anim.playSegments(this.props.segments, true);
     }
   }, {
-    key: 'stop',
+    key: "stop",
     value: function stop() {
       this.anim.stop();
     }
   }, {
-    key: 'pause',
+    key: "pause",
     value: function pause() {
-      if (this.props.isPaused && !this.anim.isPaused) {
-        this.anim.pause();
-      } else if (!this.props.isPaused && this.anim.isPaused) {
-        this.anim.pause();
-      }
+      this.anim.pause();
     }
   }, {
-    key: 'destroy',
+    key: "destroy",
     value: function destroy() {
+      /* The animation may already be gone, e.g. after a fast unmount or a
+         failed loadAnimation call (issue #51). */
+      if (!this.anim) return;
       this.anim.destroy();
     }
   }, {
-    key: 'registerEvents',
+    key: "registerEvents",
     value: function registerEvents(eventListeners) {
       var _this2 = this;
-
       eventListeners.forEach(function (eventListener) {
         _this2.anim.addEventListener(eventListener.eventName, eventListener.callback);
       });
     }
   }, {
-    key: 'deRegisterEvents',
+    key: "deRegisterEvents",
     value: function deRegisterEvents(eventListeners) {
       var _this3 = this;
-
       eventListeners.forEach(function (eventListener) {
         _this3.anim.removeEventListener(eventListener.eventName, eventListener.callback);
       });
     }
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
       var _this4 = this;
-
-      var _props2 = this.props,
-          width = _props2.width,
-          height = _props2.height,
-          ariaRole = _props2.ariaRole,
-          ariaLabel = _props2.ariaLabel,
-          isClickToPauseDisabled = _props2.isClickToPauseDisabled,
-          title = _props2.title;
-
-
+      var _this$props2 = this.props,
+        width = _this$props2.width,
+        height = _this$props2.height,
+        ariaRole = _this$props2.ariaRole,
+        ariaLabel = _this$props2.ariaLabel,
+        isClickToPauseDisabled = _this$props2.isClickToPauseDisabled,
+        title = _this$props2.title,
+        tabIndex = _this$props2.tabIndex;
       var getSize = function getSize(initial) {
-        var size = void 0;
-
+        var size;
         if (typeof initial === 'number') {
-          size = initial + 'px';
+          size = "".concat(initial, "px");
         } else {
           size = initial || '100%';
         }
-
         return size;
       };
-
-      var lottieStyles = (0, _extends3.default)({
+      var lottieStyles = _objectSpread({
         width: getSize(width),
         height: getSize(height),
         overflow: 'hidden',
         margin: '0 auto',
         outline: 'none'
       }, this.props.style);
-
       var onClickHandler = isClickToPauseDisabled ? function () {
         return null;
       } : this.handleClickToPause;
-
       return (
-        // Bug with eslint rules https://github.com/airbnb/javascript/issues/1374
-        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-        _react2.default.createElement('div', {
+        /*#__PURE__*/
+        // Click-to-pause is intentional and role="button" is set; keyboard control
+        // is not part of the API yet.
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+        _react["default"].createElement("div", {
           ref: function ref(c) {
             _this4.el = c;
           },
@@ -236,35 +230,30 @@ var Lottie = function (_React$Component) {
           onClick: onClickHandler,
           title: title,
           role: ariaRole,
-          'aria-label': ariaLabel,
-          tabIndex: '0'
+          "aria-label": ariaLabel,
+          tabIndex: tabIndex
         })
       );
     }
   }]);
-  return Lottie;
-}(_react2.default.Component);
-
-exports.default = Lottie;
-
-
+}(_react["default"].Component);
 Lottie.propTypes = {
-  eventListeners: _propTypes2.default.arrayOf(_propTypes2.default.object),
-  options: _propTypes2.default.object.isRequired,
-  height: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
-  width: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
-  isStopped: _propTypes2.default.bool,
-  isPaused: _propTypes2.default.bool,
-  speed: _propTypes2.default.number,
-  segments: _propTypes2.default.arrayOf(_propTypes2.default.number),
-  direction: _propTypes2.default.number,
-  ariaRole: _propTypes2.default.string,
-  ariaLabel: _propTypes2.default.string,
-  isClickToPauseDisabled: _propTypes2.default.bool,
-  title: _propTypes2.default.string,
-  style: _propTypes2.default.object
+  eventListeners: _propTypes["default"].arrayOf(_propTypes["default"].object),
+  options: _propTypes["default"].object.isRequired,
+  height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  isStopped: _propTypes["default"].bool,
+  isPaused: _propTypes["default"].bool,
+  speed: _propTypes["default"].number,
+  segments: _propTypes["default"].arrayOf(_propTypes["default"].number),
+  direction: _propTypes["default"].number,
+  ariaRole: _propTypes["default"].string,
+  ariaLabel: _propTypes["default"].string,
+  isClickToPauseDisabled: _propTypes["default"].bool,
+  title: _propTypes["default"].string,
+  style: _propTypes["default"].object,
+  tabIndex: _propTypes["default"].number
 };
-
 Lottie.defaultProps = {
   eventListeners: [],
   isStopped: false,
@@ -273,5 +262,6 @@ Lottie.defaultProps = {
   ariaRole: 'button',
   ariaLabel: 'animation',
   isClickToPauseDisabled: false,
-  title: ''
+  title: '',
+  tabIndex: 0
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-lottie",
-  "version": "1.2.10",
+  "version": "2.0.0",
   "funding": "https://opencollective.com/react-lottie",
   "description": "lottie animation view for React",
   "repository": {
@@ -10,48 +10,55 @@
   "license": "MIT",
   "scripts": {
     "release": "git add package.json && git commit -m 'chore: bump version number' && standard-version --first-release && git push --follow-tags origin master && npm publish",
+    "postinstall": "node scripts/postinstall.js",
     "prepublish": ". ./.scripts/prepublish.sh",
     "lint": "eslint src",
     "lintfix": "eslint src --fix",
-    "testonly": "mocha --require .scripts/mocha_runner src/**/tests/**/*.js",
+    "testonly": "mocha --require .scripts/mocha_runner.js src/**/tests/**/*.js",
     "test": "npm run lint && npm run testonly",
     "test-watch": "npm run testonly -- --watch --watch-extensions js",
-    "start": "start-storybook -p 9010",
+    "start": "storybook dev -p 9010",
+    "build-storybook": "storybook build -o .out",
     "publish-storybook": "bash .scripts/publish_storybook.sh",
     "postpublish": "npm run publish-storybook"
   },
   "devDependencies": {
-    "@kadira/storybook": "^2.35.3",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^6.1.2",
-    "babel-loader": "^6.2.5",
-    "babel-plugin-transform-runtime": "^6.15.0",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-react-app": "^0.2.1",
-    "chai": "^3.5.0",
-    "enzyme": "^2.2.0",
-    "eslint": "^3.6.0",
-    "eslint-config-airbnb": "^12.0.0",
-    "eslint-plugin-import": "^1.16.0",
-    "eslint-plugin-jsx-a11y": "^2.2.2",
-    "eslint-plugin-react": "^6.3.0",
-    "git-url-parse": "^6.0.1",
-    "jsdom": "^9.5.0",
-    "mocha": "^5.2.0",
-    "react": "^15.6.2",
-    "react-addons-test-utils": "^15.6.2",
-    "react-dom": "^15.6.2",
-    "sinon": "^1.17.6",
-    "standard-version": "^9.5.0"
+    "@babel/cli": "^7.29.7",
+    "@babel/core": "^7.29.7",
+    "@babel/preset-env": "^7.29.7",
+    "@babel/preset-react": "^7.29.7",
+    "@babel/register": "^7.29.7",
+    "@cfaester/enzyme-adapter-react-18": "^0.8.0",
+    "@eslint/js": "^9.39.5",
+    "@storybook/react-vite": "^10.6.5",
+    "chai": "^4.5.0",
+    "enzyme": "^3.11.0",
+    "eslint": "^9.39.5",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "globals": "^17.14.0",
+    "jsdom": "^29.1.1",
+    "mocha": "^12.0.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sinon": "^22.1.0",
+    "standard-version": "^9.5.0",
+    "storybook": "^10.6.5",
+    "vite": "^7.3.7"
   },
   "peerDependencies": {
-    "react": ">=15.0.0"
+    "react": ">=16.8.0"
+  },
+  "overrides": {
+    "cheerio": "1.0.0-rc.12"
+  },
+  "resolutions": {
+    "cheerio": "1.0.0-rc.12"
   },
   "dependencies": {
-    "babel-runtime": "^6.26.0",
     "lottie-web": "^5.12.2",
-    "prop-types": "^15.6.1"
+    "prop-types": "^15.8.1"
   },
   "main": "dist/index.js"
 }

package/scripts/postinstall.js

@@ -0,0 +1,78 @@
+#!/usr/bin/env node
+
+// Shown after `npm install` so anyone who runs into a problem knows where to
+// report it. This file ships in the published tarball (`.scripts/` does not),
+// so keep it dependency-free and never let it fail an install.
+
+const ISSUES_URL = 'https://github.com/chenqingspring/react-lottie/issues';
+const RELAY_URL = 'https://get-relay.cc';
+
+const ANSI = {
+  reset: '\u001b[0m',
+  bold: '\u001b[1m',
+  cyan: '\u001b[36m',
+};
+
+// Colors make the banner pop in a terminal, but npm usually captures the
+// script output, so the box frame alone has to carry the emphasis.
+const colorEnabled = (() => {
+  if (process.env.NO_COLOR) return false;
+  if (process.env.FORCE_COLOR === '0') return false;
+  if (process.env.TERM === 'dumb') return false;
+  return Boolean(process.env.FORCE_COLOR) || Boolean(process.stdout && process.stdout.isTTY);
+})();
+
+const style = (text, ...codes) =>
+  colorEnabled ? `${codes.join('')}${text}${ANSI.reset}` : text;
+
+const accent = (text) => style(text, ANSI.bold, ANSI.cyan);
+
+// Modern terminals render the rounded box; Windows consoles may not, so fall
+// back to plain ASCII there.
+const frame = process.platform === 'win32'
+  ? { tl: '+', tr: '+', bl: '+', br: '+', h: '-', v: '|' }
+  : { tl: '╭', tr: '╮', bl: '╰', br: '╯', h: '─', v: '│' };
+
+const rows = [
+  { plain: '', styled: '' },
+  {
+    plain: 'react-lottie is maintained automatically by RELAY',
+    styled: `react-lottie is maintained automatically by ${accent('RELAY')}`,
+  },
+  {
+    plain: `Learn more: ${RELAY_URL}`,
+    styled: `Learn more: ${accent(RELAY_URL)}`,
+  },
+  { plain: '', styled: '' },
+  {
+    plain: 'Found a bug or have a feature request?',
+    styled: 'Found a bug or have a feature request?',
+  },
+  {
+    plain: 'Open an issue and RELAY will review and fix it:',
+    styled: `Open an issue and ${accent('RELAY')} will review and fix it:`,
+  },
+  {
+    plain: `  ${ISSUES_URL}`,
+    styled: `  ${accent(ISSUES_URL)}`,
+  },
+];
+
+const width = Math.max(...rows.map((row) => row.plain.length));
+const horizontal = frame.h.repeat(width + 4);
+const border = (text) => style(text, ANSI.cyan);
+
+const notice = [
+  '',
+  border(`${frame.tl}${horizontal}${frame.tr}`),
+  ...rows.map(({ plain, styled }) =>
+    `${border(frame.v)}  ${styled}${' '.repeat(width - plain.length)}  ${border(frame.v)}`),
+  border(`${frame.bl}${horizontal}${frame.br}`),
+  '',
+].join('\n');
+
+try {
+  console.log(notice);
+} catch {
+  // A missing stdout (or a hostile environment) must not break the install.
+}

package/.eslintrc

@@ -1,22 +0,0 @@
-{
-  "parser": "babel-eslint",
-  "extends": "airbnb",
-  "rules": {
-    # We use _ to define private variables and methods in clases
-    "no-underscore-dangle": 0,
-    # This seems to be buggy we don't want eslint to check this
-    "import/no-extraneous-dependencies": 0,
-    # This is a depricated rule. So we turned off it.
-    "react/require-extension": 0,
-    # We can write JSX in anyfile we want.
-    "react/jsx-filename-extension": 0,
-    # We don't like this rule.
-    "arrow-body-style": 0,
-    # We don't like this rule. We write arrow functions only when we needed.
-    "prefer-arrow-callback": 0,
-    # We don't need to write function names always.
-    "func-names": 0,
-    # propTypes can be object
-    "react/forbid-prop-types": 0,
-  },
-}

package/.github/FUNDING.yml

@@ -1,15 +0,0 @@
-# These are supported funding model platforms
-
-github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
-patreon: # Replace with a single Patreon username
-open_collective: react-lottie
-ko_fi: # Replace with a single Ko-fi username
-tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
-community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
-liberapay: # Replace with a single Liberapay username
-issuehunt: # Replace with a single IssueHunt username
-lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
-polar: # Replace with a single Polar username
-buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
-thanks_dev: # Replace with a single thanks.dev username
-custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,6 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="ERROR" enabled_by_default="true" />
-  </profile>
-</component>

package/.idea/misc.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="JavaScriptSettings">
-    <option name="languageLevel" value="JSX" />
-  </component>
-</project>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/react-lottie.iml" filepath="$PROJECT_DIR$/.idea/react-lottie.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/react-lottie.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>

package/.scripts/get_gh_pages_url.js

@@ -1,11 +0,0 @@
-// IMPORTANT
-// ---------
-// This is an auto generated file with React CDK.
-// Do not modify this file.
-
-const parse = require('git-url-parse');
-var ghUrl = process.argv[2];
-const parsedUrl = parse(ghUrl);
-
-const ghPagesUrl = 'https://' + parsedUrl.owner + '.github.io/' + parsedUrl.name;
-console.log(ghPagesUrl);

package/.scripts/mocha_runner.js

@@ -1,34 +0,0 @@
-// IMPORTANT
-// ---------
-// This is an auto generated file with React CDK.
-// Do not modify this file.
-// Use `.scripts/user/pretest.js instead`.
-
-process.env.NODE_ENV = 'development';
-require('babel-core/register');
-require('babel-polyfill');
-
-// Add jsdom support, which is required for enzyme.
-var jsdom = require('jsdom').jsdom;
-
-var exposedProperties = ['window', 'navigator', 'document'];
-
-global.document = jsdom('');
-global.window = document.defaultView;
-Object.keys(document.defaultView).forEach((property) => {
-  if (typeof global[property] === 'undefined') {
-    exposedProperties.push(property);
-    global[property] = document.defaultView[property];
-  }
-});
-
-global.navigator = {
-  userAgent: 'node.js'
-};
-
-process.on('unhandledRejection', function (error) {
-  console.error('Unhandled Promise Rejection:');
-  console.error(error && error.stack || error);
-});
-
-require('./user/pretest.js');

package/.scripts/prepublish.sh

@@ -1,16 +0,0 @@
-#!/bin/bash
-
-# IMPORTANT
-# ---------
-# This is an auto generated file with React CDK.
-# Do not modify this file.
-# Use `.scripts/user/prepublish.sh instead`.
-
-echo "=> Transpiling 'src' into ES5 ..."
-echo ""
-rm -rf ./dist
-NODE_ENV=production ./node_modules/.bin/babel --ignore tests,stories --plugins "transform-runtime" ./src --out-dir ./dist
-echo ""
-echo "=> Transpiling completed."
-
-. .scripts/user/prepublish.sh

package/.scripts/publish_storybook.sh

@@ -1,47 +0,0 @@
-#!/bin/bash
-
-# IMPORTANT
-# ---------
-# This is an auto generated file with React CDK.
-# Do not modify this file.
-
-set -e # exit with nonzero exit code if anything fails
-
-# get GIT url
-
-GIT_URL=`git config --get remote.origin.url`
-if [[ $GIT_URL == "" ]]; then
-  echo "This project is not configured with a remote git repo".
-  exit 1
-fi
-
-# clear and re-create the out directory
-rm -rf .out || exit 0;
-mkdir .out;
-
-# run our compile script, discussed above
-build-storybook -o .out
-
-# go to the out directory and create a *new* Git repo
-cd .out
-git init
-
-# inside this git repo we'll pretend to be a new user
-git config user.name "GH Pages Bot"
-git config user.email "hello@ghbot.com"
-
-# The first and only commit to this new Git repo contains all the
-# files present with the commit message "Deploy to GitHub Pages".
-git add .
-git commit -m "Deploy Storybook to GitHub Pages"
-
-# Force push from the current repo's master branch to the remote
-# repo's gh-pages branch. (All previous history on the gh-pages branch
-# will be lost, since we are overwriting it.) We redirect any output to
-# /dev/null to hide any sensitive credential data that might otherwise be exposed.
-git push --force --quiet $GIT_URL master:gh-pages > /dev/null 2>&1
-cd ..
-rm -rf .out
-
-echo ""
-echo "=> Storybook deployed to: `node .scripts/get_gh_pages_url.js $GIT_URL`"

package/.scripts/user/prepublish.sh

@@ -1 +0,0 @@
-# Use this file to your own code to run at NPM `prepublish` event.

package/.scripts/user/pretest.js

@@ -1 +0,0 @@
-// Use this file to setup any test utilities.

package/.storybook/config.js

@@ -1,12 +0,0 @@
-// IMPORTANT
-// ---------
-// This is an auto generated file with React CDK.
-// Do not modify this file.
-
-import { configure } from '@kadira/storybook';
-
-function loadStories() {
-  require('../src/stories');
-}
-
-configure(loadStories, module);

package/.storybook/head.html

@@ -1,44 +0,0 @@
-<a href="https://github.com/chenqingspring/react-lottie" class="github-corner" aria-label="View source on Github">
-    <svg width="80" height="80" viewBox="0 0 250 250"
-         style="fill:#e91e63;color:#fff;position:absolute;top:0;border:0;right:0" aria-hidden="true">
-        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
-        <path
-                d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
-                fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path>
-        <path
-                d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
-                fill="currentColor" class="octo-body"></path>
-    </svg>
-</a>
-<style type="text/css">
-    .github-corner {
-
-    }
-
-    .github-corner:hover .octo-arm {
-        animation: octocat-wave 560ms ease-in-out
-    }
-
-    @keyframes octocat-wave {
-        0%, 100% {
-            transform: rotate(0)
-        }
-        20%, 60% {
-            transform: rotate(-25deg)
-        }
-        40%, 80% {
-            transform: rotate(10deg)
-        }
-    }
-
-    @media (max-width: 500px) {
-        .github-corner:hover .octo-arm {
-            animation: none
-        }
-
-        .github-corner .octo-arm {
-            animation: octocat-wave 560ms ease-in-out
-        }
-    }
-
-</style>