lottie-react-wrapper

一个封装 react-lottie 的 Lottie 动画组件包，提供更简洁的 API 和更好的 TypeScript 支持。

安装

npm install lottie-react-wrapper react-lottie
# 或
yarn add lottie-react-wrapper react-lottie
# 或
pnpm add lottie-react-wrapper react-lottie

使用

基础用法

import React from 'react';
import { Lottie } from 'lottie-react-wrapper';

function App() {
  return (
    <Lottie
      path="/path/to/animation.json"
      height={300}
      width={300}
    />
  );
}

高级用法

import React, { useState } from 'react';
import { Lottie } from 'lottie-react-wrapper';

function App() {
  const [isPaused, setIsPaused] = useState(false);

  return (
    <div>
      <Lottie
        path="/path/to/animation.json"
        height={400}
        width={400}
        isPaused={isPaused}
        speed={1.5}
        direction={1}
        options={{
          loop: true,
          autoplay: true,
          renderer: 'svg',
        }}
        eventListeners={[
          {
            eventName: 'complete',
            callback: () => {
              console.log('动画播放完成');
            },
          },
        ]}
      />
      <button onClick={() => setIsPaused(!isPaused)}>
        {isPaused ? '播放' : '暂停'}
      </button>
    </div>
  );
}

API

LottieProps

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | path | string | 必需 | Lottie JSON 文件路径（URL 或相对路径） | | options | Partial<LottieOptions> | {} | Lottie 选项配置（透传给 react-lottie） | | height | number \| string | - | 动画高度 | | width | number \| string | - | 动画宽度 | | isPaused | boolean | false | 是否暂停 | | isStopped | boolean | false | 是否停止 | | speed | number | 1 | 播放速度 | | direction | 1 \| -1 | 1 | 播放方向：1 正向，-1 反向 | | segments | number[] \| boolean | - | 动画片段配置 | | ariaRole | string | - | ARIA 角色 | | ariaLabel | string | - | ARIA 标签 | | isClickToPauseDisabled | boolean | false | 是否禁用点击暂停/播放 | | title | string | - | 标题 | | eventListeners | Array<{eventName: string, callback: (e: any) => void}> | - | 事件监听器 |

LottieOptions

options 参数支持以下配置（透传给 react-lottie）：

| 属性 | 类型 | 说明 | |------|------|------| | loop | boolean \| number | 是否循环播放（true/false 或循环次数） | | autoplay | boolean | 是否自动播放 | | renderer | 'svg' \| 'canvas' \| 'html' | 渲染器类型 | | rendererSettings | object | 渲染器设置 |

开发

# 安装依赖
npm install

# 开发模式（监听文件变化）
npm run dev

# 构建
npm run build

许可证

MIT

相关链接

• react-lottie
• Lottie Files