# @adi-prasetyo/react-joyride 中文文档

规范地址：https://npmcn.com/package/%40adi-prasetyo/react-joyride/

版本：2\.9\.3-adp\.1
npm 元数据更新时间：2025-08-05T03:11:58.137Z
中文译文更新时间：2026-11-06T06:19:29.668Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40adi-prasetyo/react-joyride
原文对照：https://npmcn.com/package/%40adi-prasetyo/react-joyride/?lang=original
项目主页：https://github.com/adi-prasetyo/react-joyride
源码仓库：https://github.com/adi-prasetyo/react-joyride

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

- 包体积（解压后）：535 kB，31 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：11 个
- peer 依赖：react 15 - 19，react-dom 15 - 19
- 首次发布：2025-08-05T03:11:57.471Z
- 最新版本发布：2025-08-05T03:11:57.853Z
- 近 30 天下载量：4470（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）

## 中文简介

为您的应用程序创建导游( 带有额外修正的叉子)

## 安装

```sh
npm install @adi-prasetyo/react-joyride
```

也可以使用：`pnpm add @adi-prasetyo/react-joyride`、`yarn add @adi-prasetyo/react-joyride`、`bun add @adi-prasetyo/react-joyride`

## README

# 反应喜悦

[![](https://badge.fury.io/js/react-joyride.svg)](https://www.npmjs.com/package/react-joyride) [![CI](https://github.com/gilbarbara/react-joyride/actions/workflows/main.yml/badge.svg)](https://github.com/gilbarbara/react-joyride/actions/workflows/main.yml) [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=gilbarbara_react-joyride&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=gilbarbara_react-joyride) [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=gilbarbara_react-joyride&metric=coverage)](https://sonarcloud.io/summary/new_code?id=gilbarbara_react-joyride)

[![Joyride example image](http://gilbarbara.com/files/react-joyride.png)](https://react-joyride.com/)

#### 为您的应用程序创建精彩的旅游!

向新用户显示您的应用程序或解释新功能的功能 .

用这个 [反应-浮动器](https://github.com/gilbarbara/react-floater) 用于定位和造型.  
你也可以使用自己的组件!

**查看演示 [这里](https://react-joyride.com/)** (或密码箱) [实例](https://codesandbox.io/s/github/gilbarbara/react-joyride-demo)(中文(简体) )

**读取 [文档](https://docs.react-joyride.com/)**

说吧 [讨论板](https://github.com/gilbarbara/react-joyride/discussions)。 。 。 .

## 关于这个叉子

> **说明**: 这是原有反应-joyride与现代依赖性更新和回放19相容性所保持的叉.

**叉仓库**数字 : [adi-prasetyo/反应-欢乐](https://github.com/adi-prasetyo/react-joyride)  
**处**数字 : `adp-maintained`  
**原文**数字 : [g/反应-欢乐](https://github.com/gilbarbara/react-joyride)

### 与原件的密钥差异:

-   ✅ **反应19 支持** - 与反应19完全兼容
-   ✅ **现代依赖** - 更新至最新安全版本
-   ✅ **安全设备** - 消除重大脆弱性
-   ✅ **更新工具** - Vitest 3.x, TypeScript 5.9, 现代建设工具
-   ✅ **后向兼容** - 相同的API,没有消费者的突破变化

**此分叉的安装 :**

```bash
npm install github:adi-prasetyo/react-joyride#adp-maintained
```

详细差异见 [分叉文档](https://npmcn.com/package/%40adi-prasetyo/react-joyride/docs/fork-differences.md)。 。 。 .

## 设置

```bash
npm i react-joyride
```

## 开始

```jsx
import Joyride from 'react-joyride';

export class App extends React.Component {
  state = {
    steps: [
      {
        target: '.my-first-step',
        content: 'This is my awesome feature!',
      },
      {
        target: '.my-other-step',
        content: 'This another awesome feature!',
      },
      ...
    ]
  };

  render () {
    const { steps } = this.state;

    return (
      <div className="app">
        <Joyride
          steps={steps}
          ...
        />
        ...
      </div>
    );
  }
}
```

> 如果您需要支持遗留浏览器, 您需要包含 [滚动](https://github.com/mathiasbynens/document.scrollingElement) 混合填充剂.

* * *

发起人:

[![Frigade](https://files.gilbarbara.dev/media/frigade-sponsor-v2.png)](https://frigade.com/?source=joyride)

Joyride的反响很骄傲 [果冻](https://frigade.com/?source=joyride),开发者用于构建更好的产品登入的工具:导游,获得开始的核对表,公告等.

* * *

## 发展

建立地方发展环境是容易的!

克隆(或分叉)在您的机器上进行重传,导航到它在终端的位置并运行:

```bash
npm install
npm link # link your local repo to your global packages
npm run watch # build the files and watch for changes
```

现在复制 [https://github.com/gilbarbara/react-joyride-demo 互联网档案馆的存檔,存档日期2013-12-22](https://github.com/gilbarbara/react-joyride-demo) 运行 :

```bash
npm install
npm link react-joyride # just link your local copy into this project's node_modules
npm start
```

**开始编码!** 🎉

## 常见问题

### @adi-prasetyo/react-joyride 是什么？

为您的应用程序创建导游\( 带有额外修正的叉子\)

### 如何安装 @adi-prasetyo/react-joyride？

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

### @adi-prasetyo/react-joyride 支持 TypeScript 吗？

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

### @adi-prasetyo/react-joyride 支持 ESM 还是 CommonJS？

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

### @adi-prasetyo/react-joyride 可以商用吗？

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

### @adi-prasetyo/react-joyride 的下载量有多少？

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

### @adi-prasetyo/react-joyride 还在维护吗？

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