https://github.com/react-component/tour
https://github.com/react-component/tour
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/react-component/tour
- Owner: react-component
- License: mit
- Created: 2022-09-29T02:43:48.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2025-05-24T13:17:42.000Z (7 months ago)
- Last Synced: 2025-08-25T22:56:06.312Z (4 months ago)
- Language: TypeScript
- Homepage: tour-dun.vercel.app
- Size: 449 KB
- Stars: 36
- Watchers: 5
- Forks: 34
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @rc-component/tour
React 18 supported Tour Component.
[![NPM version][npm-image]][npm-url] [](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![npm download][download-image]][download-url]
[npm-image]: http://img.shields.io/npm/v/@rc-component/tour.svg?style=flat-square
[npm-url]: http://npmjs.org/package/@rc-component/tour
[github-actions-image]: https://github.com/react-component/tour/workflows/CI/badge.svg
[github-actions-url]: https://github.com/react-component/tour/actions
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/tour/master.svg?style=flat-square
[codecov-url]: https://app.codecov.io/gh/react-component/tour
[download-image]: https://img.shields.io/npm/dm/@rc-component/tour.svg?style=flat-square
[download-url]: https://npmjs.org/package/@rc-component/tour
## Development
```bash
npm install
npm start
open http://localhost:8000
```
## Feature
- React life cycle support tour component
## Install
[](https://www.npmjs.com/package/@rc-component/tour)
## Usage
```js | pure
import Tour from '@rc-component/tour';
const Demo = () => {
const createBtnRef = useRef(null);
const updateBtnRef = useRef(null);
const deleteBtnRef = useRef(null);
return (
Create
Update
Delete
createBtnRef.current,
mask: true,
},
{
title: '更新',
description: (
更新一条数据
帮助文档
),
target: () => updateBtnRef.current,
},
{
title: '删除',
description: (
危险操作：删除一条数据
帮助文档
),
target: () => deleteBtnRef.current,
mask: true,
style: { color: 'red' },
},
]}
/>
);
};
export default Demo;
```
## 🔥 API
We use typescript to create the Type definition. You can view directly in IDE. But you can still check the type definition [here](https://github.com/react-component/tour/blob/master/src/interface.ts).
### Tour
| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| closeIcon | `React.ReactNode` | - | 自定义关闭按钮 |
| steps | `TourStepProps[]` | - | 引导步骤 |
| open | `boolean` | `true` | 受控打开引导（与 `current` 受控分开） |
| current | `number` | 0 | 受控当前处于哪一步 |
| defaultCurrent | `number` | 0 | 默认处于哪一步 |
| gap | `{ offset?: number \| [number, number]; radius?: number }` | - | 控制引导显示间距 |
| onChange | `(current: number) => void` | - | 步骤改变时的回调，`current`为改变前的步骤，`next`为改变后的步骤 |
| onClose | `(current: number) => void` | - | 关闭引导时的回调 |
| onFinish | `() => void` | - | 完成引导时的回调 |
| mask | `boolean \| { style?: React.CSSProperties; color?: string; }` | `true` | 整体是否启用蒙层，也可以传入自定义样式修改蒙层样式 |
| animated | `boolean \| { placeholder: boolean }` | `false` | 是否启用目标遮罩动画 |
| arrow | `boolean \| { pointAtCenter: boolean}` | `true` | 整体是否显示箭头，包含是否指向元素中心的配置 |
| scrollIntoViewOptions | `boolean \| ScrollIntoViewOptions` | `true` | 是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数 |
| onPopupAlign | `function(popupDomNode, align)` | - | 当弹出框对齐后回调 |
| zIndex | `number` | 1001 | 弹层的层级 |
### TourStep
| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| closeIcon | `React.ReactNode` | - | 自定义关闭按钮 |
| target | `() => HTMLElement` \| `HTMLElement` | - | 获取引导卡片指向的元素 |
| arrow | `boolean` \| `{ pointAtCenter: boolean}` | `true` | 是否显示箭头，包含是否指向元素中心的配置 |
| placement | `left` \| `leftTop` \| `leftBottom` \| `right` \| `rightTop` \| `rightBottom` \| `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | `bottom` | 引导卡片相对于目标元素的位置 |
| onClose | `() => void` | - | 关闭引导时的回调函数 |
| mask | `boolean \| { style?: React.CSSProperties; color?: string; }` | `true` | 是否启用蒙层，也可以传入自定义样式修改蒙层样式，默认跟随 Tour 的 `mask` 属性 |
| renderPanel | `(props: TourStepProps, current: number) => ReactNode;` | | 渲染 popoup 弹窗方法 |
| className | `string` | - | - |
| style | `React.CSSProperties` | - | - |
| scrollIntoViewOptions | `boolean \| ScrollIntoViewOptions` | `true` | 是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数，默认跟随 Tour 的 `scrollIntoViewOptions` 属性 |
## 🤝 Contributing
