# @alfonmga/react-lottie-light-ts 中文文档

规范地址：https://npmcn.com/package/%40alfonmga/react-lottie-light-ts/

版本：0\.0\.1
npm 元数据更新时间：2022-04-04T12:49:08.167Z
中文译文更新时间：2026-11-07T02:06:37.312Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40alfonmga/react-lottie-light-ts
原文对照：https://npmcn.com/package/%40alfonmga/react-lottie-light-ts/?lang=original
项目主页：https://github.com/alfonmga/react-lottie-light-ts#readme
源码仓库：https://github.com/alfonmga/react-lottie-light-ts

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：21.3 kB，8 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react ~16\.9\.0，react-dom ~16\.9\.0
- 首次发布：2020-01-16T00:38:48.286Z
- 最新版本发布：2020-01-16T00:38:48.522Z
- 近 30 天下载量：2082（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）

## 中文简介

Airbnb的反射/脚本包装 [乐天网](https://github.com/airbnb/lottie-web) 莉比,别这样.

## 安装

```sh
npm install @alfonmga/react-lottie-light-ts
```

也可以使用：`pnpm add @alfonmga/react-lottie-light-ts`、`yarn add @alfonmga/react-lottie-light-ts`、`bun add @alfonmga/react-lottie-light-ts`

## README

# @crello/ react-lottie (英语)

Airbnb的反射/脚本包装 [乐天网](https://github.com/airbnb/lottie-web) 莉比,别这样.

## 演示

[https://crello.github.io/ react-lotie/ 页面存档备份,存于互联网档案馆](https://crello.github.io/react-lottie/)

您可以在 `./examples` 文件夹 -- 启动方式 `yarn start`

## 安装

`yarn add @crello/react-lottie` 或者说 `npm install --save @crello/react-lottie`

## 使用量

最基本的反应- lottie 示例 :

```typescript
import React from 'react';
import { Lottie } from '@crello/react-lottie'
import animationData from './myAwesomeAnimation.json'

export const BasicLottieComponent = () => <Lottie config={{animationData: animationData}}>
```

Lottie 组件创建 `<div>` 传递给lottie 配置为 `container` 一、导 言 此 div 包含渲染器的所选类型输出 : `'svg'| 'html' | 'canvas'`。 。 。 . `<Lottie>` 接受 `style` 财务报告和审定财务报表 `className` 适用于 `container`。 。 。 .

任何浏览器事件都应被添加到实际包裹的元素上 `<Lottie>` 例如:

```html
<div onClick={..}>
    <Lottie/>
<div>
```

## 参数

### 道具

```typescript
{
  height?: string - valid css value e.g. '100px' [default: `100%`],
  width?: string - valid css value e.g. '100px' [default: `100%`],
  playingState?: 'playing' | 'stopped' | 'paused' [default: `playing`],
  segments?: AnimationSegment | AnimationSegment[],
  speed?: number - animation playback speed [default: `1`],
  style?: styles passed to lottie container,
  direction?: AnimationDirection - [default: `1`],
  lottieEventListeners?: ReactLottieEvent[] - see available events in AnimationEventName from 'lottie-web',
  config: ReactLottieConfig - config with mandatory `path` or `animationData`,
}
```

### 配置

```typescript
{
  animationData: any - an Object with the exported animation data,
  path: string - remote data,
  renderer?: 'svg' | 'canvas' | 'html' - choose renderer [default: `svg`],
  loop?: boolean | number - loop boolean or count [default: `false`],
  autoplay?: boolean - it will start playing as soon as it is ready [default: `true`],
  name?: string - animation name for future reference,
  rendererSettings?: SVGRendererConfig | CanvasRendererConfig | HTMLRendererConfig,
}
```

## 再来

详情请见@crello/ react-lotie [出口](https://github.com/crello/react-lottie/blob/master/src/components/Lottie/interface.ts)数字 : `Lottie`, (中文(简体) ), `ReactLottieConfig`, (中文(简体) ), `ReactLottieOwnProps`, (中文(简体) ), `ReactLottiePlayingState`

并检查提供的类型 [`lottie-web`](https://github.com/airbnb/lottie-web/blob/master/index.d.ts) 本身: `AnimationDirection`, (中文(简体) ), `AnimationSegment`, (中文(简体) ), `AnimationEventName`, (中文(简体) ), `AnimationEventCallback`, (中文(简体) ), `AnimationItem`, (中文(简体) ), `BaseRendererConfig`, (中文(简体) ), `SVGRendererConfig`, (中文(简体) ), `CanvasRendererConfig`, (中文(简体) ), `HTMLRendererConfig`, (中文(简体) ), `AnimationConfig`, (中文(简体) ), `AnimationConfigWithPath`, (中文(简体) ), `AnimationConfigWithData`, (中文(简体) ), `Lottie`

更多的Lottie动画,你可以找到 [乐器文件](https://www.lottiefiles.com/)

## 许可证

麻省理工学院

## 常见问题

### @alfonmga/react-lottie-light-ts 是什么？

Airbnb的反射/脚本包装 乐天网 莉比,别这样\.

### 如何安装 @alfonmga/react-lottie-light-ts？

在项目目录运行 npm install @alfonmga/react-lottie-light-ts，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（~16\.9\.0）、react-dom（~16\.9\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @alfonmga/react-lottie-light-ts 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @alfonmga/react-lottie-light-ts 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @alfonmga/react-lottie-light-ts 可以商用吗？

@alfonmga/react-lottie-light-ts 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @alfonmga/react-lottie-light-ts 的下载量有多少？

根据 npm 官方下载统计，@alfonmga/react-lottie-light-ts 在 2026/10/06 – 2026/11/04 这 30 天内被下载 2,082 次，日均约 69 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @alfonmga/react-lottie-light-ts 还在维护吗？

最新版本 0\.0\.1 发布于 2020/01/16（6 年前）；至今共发布 1 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/01/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。