React tour Component
npm install @rc-component/tourReact 18 supported Tour Component.
[![NPM version][npm-image]][npm-url]  [![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
``bash`
npm install
npm start
open http://localhost:8000
- React life cycle support tour component

`js | pure
import { useRef } from 'react';
import Tour from '@rc-component/tour';
const Demo = () => {
const createBtnRef = useRef
const updateBtnRef = useRef
const deleteBtnRef = useRef
return (
className="ant-target"
ref={createBtnRef}
style={{ marginLeft: 100 }}
>
Create
steps={[
{
title: '创建',
description: '创建一条数据',
target: () => createBtnRef.current,
mask: true,
},
{
title: '更新',
description: (
更新一条数据
),
target: () => updateBtnRef.current,
},
{
title: '删除',
description: (
危险操作:删除一条数据
),
target: () => deleteBtnRef.current,
mask: true,
style: { color: 'red' },
},
]}
/>
);
};
export default Demo;
`
We use typescript to create the Type definition. You can view directly in IDE. But you can still check the type definition here.
| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| closeIcon | React.ReactNode | - | 自定义关闭按钮 |TourStepProps[]
| steps | | - | 引导步骤 |boolean
| open | | true | 受控打开引导(与 current 受控分开) |number
| current | | 0 | 受控当前处于哪一步 |number
| defaultCurrent | | 0 | 默认处于哪一步 |{ offset?: number \| [number, number]; radius?: number }
| gap | | - | 控制引导显示间距 |(current: number) => void
| onChange | | - | 步骤改变时的回调,current为改变前的步骤,next为改变后的步骤 |(current: number) => void
| onClose | | - | 关闭引导时的回调 |() => void
| onFinish | | - | 完成引导时的回调 |boolean \| { style?: React.CSSProperties; color?: string; }
| mask | | true | 整体是否启用蒙层,也可以传入自定义样式修改蒙层样式 |boolean \| { placeholder: boolean }
| animated | | false | 是否启用目标遮罩动画 |boolean \| { pointAtCenter: boolean}
| arrow | | true | 整体是否显示箭头,包含是否指向元素中心的配置 |boolean \| ScrollIntoViewOptions
| scrollIntoViewOptions | | true | 是否支持当前元素滚动到视窗内,也可传入配置指定滚动视窗的相关参数 |function(popupDomNode, align)
| onPopupAlign | | - | 当弹出框对齐后回调 |number
| zIndex | | 1001 | 弹层的层级 |
| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| closeIcon | React.ReactNode | - | 自定义关闭按钮 |() => HTMLElement
| target | \| HTMLElement | - | 获取引导卡片指向的元素 |boolean
| arrow | \| { pointAtCenter: boolean} | true | 是否显示箭头,包含是否指向元素中心的配置 |left
| placement | \| leftTop \| leftBottom \| right \| rightTop \| rightBottom \| top \| topLeft \| topRight \| bottom \| bottomLeft \| bottomRight | bottom | 引导卡片相对于目标元素的位置 |() => void
| onClose | | - | 关闭引导时的回调函数 |boolean \| { style?: React.CSSProperties; color?: string; }
| mask | | true | 是否启用蒙层,也可以传入自定义样式修改蒙层样式,默认跟随 Tour 的 mask 属性 |(props: TourStepProps, current: number) => ReactNode;
| renderPanel | | | 渲染 popoup 弹窗方法 |string
| className | | - | - |React.CSSProperties
| style | | - | - |boolean \| ScrollIntoViewOptions
| scrollIntoViewOptions | | true | 是否支持当前元素滚动到视窗内,也可传入配置指定滚动视窗的相关参数,默认跟随 Tour 的 scrollIntoViewOptions` 属性 |