反应喜悦

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

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

用这个 反应-浮动器 用于定位和造型.
你也可以使用自己的组件!

查看演示 这里 (或密码箱) 实例(中文(简体) )

读取 文档

说吧 讨论板。 。 。 .

关于这个叉子

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

叉仓库数字 : adi-prasetyo/反应-欢乐
处数字 : adp-maintained
原文数字 : g/反应-欢乐

与原件的密钥差异:

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

此分叉的安装 :

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

详细差异见 分叉文档。 。 。 .

设置

npm i react-joyride

开始

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>
    );
  }
}

如果您需要支持遗留浏览器, 您需要包含 滚动 混合填充剂.

发起人:

Joyride的反响很骄傲 果冻,开发者用于构建更好的产品登入的工具:导游,获得开始的核对表,公告等.

发展

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

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

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 运行 :

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

开始编码! 🎉