# @crello/react-lottie 中文文档

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

版本：0\.0\.11
npm 元数据更新时间：2022-04-05T01:47:10.452Z
中文译文更新时间：2026-11-11T00:19:19.940Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40crello/react-lottie
原文对照：https://npmcn.com/package/%40crello/react-lottie/?lang=original
源码仓库：https://github.com/crello/react-lottie

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

- 包体积（解压后）：21.3 kB，12 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react ~16\.9\.0，react-dom ~16\.9\.0
- 首次发布：2019-11-22T12:23:11.219Z
- 最新版本发布：2020-10-14T06:49:09.632Z
- 近 30 天下载量：77250（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：22（近 12 个月 0 个）

## 中文简介

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

## 安装

```sh
npm install @crello/react-lottie
```

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

## 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/)

## 许可证

麻省理工学院

## 常见问题

### @crello/react-lottie 是什么？

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

### 如何安装 @crello/react-lottie？

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

### @crello/react-lottie 支持 TypeScript 吗？

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

### @crello/react-lottie 支持 ESM 还是 CommonJS？

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

### @crello/react-lottie 可以商用吗？

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

### @crello/react-lottie 的下载量有多少？

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

### @crello/react-lottie 还在维护吗？

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